I'm trying to build a doughnut chart with chart.js but the chart container is bigger than the chart canvas and it makes it harder to design stuff around it...
is there any option to make the chart and the container the same height and width?
settings:
var option = {
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
responsive: true,
aspectRatio:2,
title: { display: false },
legend: { display: false },
scales: {
xAxes: [
{
gridLines: {
drawBorder: false,
display: false,
},
ticks: {
display: false,
},
},
],
yAxes: [
{
gridLines: {
drawBorder: false,
display: false,
},
ticks: {
display: false,
},
},
],
}
};
Code Pen:
https://codepen.io/ronmara/pen/vYGeJyo
You can see there is a little gap between the left, right, and bottom border of the div.
It's a bit of a hacky solution, but setting layout.padding to -10 fits your doughnut more neatly in your container:
var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
datasets: [
{
label: "Dataset #1",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 20, 81, 56, 55, 40]
}
]
};
var option = {
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
responsive: true,
aspectRatio: 2,
title: { display: false },
legend: { display: false },
layout: {
padding: -10
},
scales: {
xAxes: [
{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
display: false
}
}
],
yAxes: [
{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
display: false
}
}
]
}
};
Chart.Doughnut("chart_0", {
options: option,
data: data
});
body {
background: white;
padding: 16px;
}
canvas {
border: 1px dotted red;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.3"></script>
<div class="chart-container" style="position: relative; height:16vh; width:32vh">
<canvas id="chart_0"></canvas>
</div>
I got it centered by removing the inline styles and adding them to the class attached to the div.
I also added the layout.padding into your options.
layout: {
padding: {
left: 0,
top: 10,
right: 10,
bottom: 0
}},
Adding codepen for reference. https://codepen.io/robert9111/pen/abNVxWY
Related
I have a chart (chartjs) with labels (datalabels).
When my data changes, my chart updates automatically. However, the largest datalabels are most of the time hidden by the automatic resizing of the y axis. Do you have any idea to fix that ?
It should be a 3 up there :)
Here is my code:
const completionOptions = {
responsive: true,
plugins: {
legend: {
display: false,
},
tooltip: {
backgroundColor: 'rgb(85, 85, 85, 1)',
displayColors: false,
// https://www.chartjs.org/docs/latest/configuration/tooltip.html
},
datalabels: {
color: 'rgb(203, 203, 203)',
anchor: 'end',
align: 'end',
labels: {
title: {
font: {
family: 'karla',
weight: '600',
size: 12,
},
}
}
}
},
scales: {
display: false,
y: {
beginAtZero: true,
display: false,
grid: {
display: false,
},
ticks: {
padding: 10
}
},
x: {
grid: {
display: false,
},
ticks: {
autoSkip: false,
maxRotation: 0,
minRotation: 0,
font: {
size: 20,
}
}
},
}
}
You can use the grace option to add extra space to the y axes:
Chart.register(ChartDataLabels)
const options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 20, 3, 5, 2, 3],
backgroundColor: 'pink'
}]
},
options: {
scales: {
y: {
grace: '10%'
}
},
plugins: {
legend: {
display: false
},
datalabels: {
anchor: 'end',
align: 'end'
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.js"></script>
</body>
I'm using the latest chart.js to draw a simple histogram.
The histogram is fine but I actually need the x labels to be between the borders of every bar like this histogram_right_labels, are there any methods to approach this?
I've tried offsetGridLines: true and offsetGridLines: false, but what they actually did is moving the grid lines and not the labels, unlike what I read about their actual behaviors, I think it might be a conflict in my option settings but I don't know which, any help would be appreciated.
options: {
maintainAspectRatio: false,
layout: {
padding: {
left: 10,
right: 25,
top: 25,
bottom: 0
}
},
scales: {
xAxes: [{
gridLines: {
//display: false,
drawBorder: false,
padding: 20,
offsetGridLines: true
},
ticks: {
beginAtZero: true,
}
}],
yAxes: [{
ticks: {
padding: 10,
},
gridLines: {
color: "rgb(234, 236, 244)",
zeroLineColor: "rgb(234, 236, 244)",
drawBorder: false,
borderDash: [2],
zeroLineBorderDash: [2]
}
}],
},
legend: {
labels: {
boxWidth: 20
},
display: false
},
tooltips: {
backgroundColor: "rgb(255,255,255)",
bodyFontColor: "#858796",
titleMarginBottom: 10,
titleFontColor: '#6e707e',
titleFontSize: 14,
borderColor: '#dddfeb',
borderWidth: 1,
xPadding: 15,
yPadding: 15,
displayColors: false,
intersect: false,
mode: 'index',
caretPadding: 10,
},
}
You can add a second x-axis of type: 'linear' as follows.
{
type: 'linear',
ticks: {
min: 0,
max: labels.length,
stepSize: 1,
callback: (v, i) => i == 0 ? '' : labels[i - 1]
}
}
Note that I use a ticks callback method in order to provide the desired tick label at given index.
Then you should also hide the grid lines and ticks of the default x-axis.
{
gridLines: {
display: false
},
ticks: {
display: false
}
}
Please take a look at below runnable sample code and see how it works.
const labels = ['4.80', '9.60', '14.40', '19.20', '24.00', '28.80'];
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: "My Dataset",
data: [4, 8, 5, 7, 2, 4],
backgroundColor: 'orange',
categoryPercentage: 1,
barPercentage: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
gridLines: {
display: false
},
ticks: {
display: false
}
},
{
type: 'linear',
ticks: {
min: 0,
max: labels.length,
stepSize: 1,
callback: (v, i) => i == 0 ? '' : labels[i - 1]
}
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<canvas id="myChart" height="90"></canvas>
you can use this to put the tooltips to the right. Possibilities are top, left, right and bottom
options: {
title: {
display: true,
position: 'right'
}
}
So I only want to show the axes border lines - and hide the grid lines. This is using the latest version of the chart.js package (2.9.3) and I have replicated my issue in a simplified Codepen shown below:
var myChart = new Chart(ctx, {
type: 'scatter',
data: {
labels: [4, 0],
datasets: [{
data: [
{ group_name: "Group A", x: 4, y: 25 },
{ group_name: "Group B", x: 0, y: 0 },
],
}],
},
options: {
legend: { display: false },
scales: {
yAxes: [ {
type: 'logarithmic',
scaleLabel: { display: true, labelString: 'Active %', fontSize: 15 },
position: 'left',
gridLines: { display: false, drawBorder: true },
ticks: {
min: 0,
max: 50,
maxTicksLimit: 4,
padding: 10,
callback: value => `${value.toLocaleString()}%`,
},
} ],
xAxes: [ {
type: 'logarithmic',
position: 'bottom',
scaleLabel: { display: true, labelString: 'User Count', fontSize: 15 },
gridLines: { display: false, drawBorder: true },
ticks: {
min: 0,
maxTicksLimit: 6,
padding: 10,
callback: value => value.toLocaleString(),
},
} ],
},
}
});
Any help or insight is appreciated; the settings I'd expect to work from the docs don't seem to be working.
You can put this options in gridline properties:
xAxes: [{
gridLines: {
display: true,
drawBorder: true,
drawOnChartArea: false
}
}]
Source: https://www.chartjs.org/samples/latest/scales/gridlines-display.html
Solved it (sort of). When I downgrade to chart.js 2.8.0 the chart borders now display as expected. With 2.9.3 the borders were not showing at all, regardless of chart type.
gridLines: { drawBorder: true, lineWidth: 0 }
I am using the datalabels plugin, and the values overlap if they are too long:
I tried using the diaply auto under plugins datalabels, but it stills overlaps, any ideas what to do so that they dont overlap?
here are my options:
const getOptions = (yAxisDisplayLabel, data, previousOpts, isMobile) => ({
...previousOpts,
layout: {
padding: {
top: 20,
},
},
plugins: {
datalabels: {
font: {
size: isMobile ? 8 : 12,
},
offset: isMobile ? -15 : -20,
anchor: 'end',
formatter: (value, context) => data.datasets[context.datasetIndex].displayValue[context.dataIndex],
display: 'auto',
align: 'start',
},
},
scales: {
yAxes: [{
ticks: {
display: true,
fontColor: '#c8c8c8',
fontSize: isMobile ? 8 : 12,
fontFamily: 'Futura Book',
beginAtZero: true,
},
gridLines: {
drawBorder: false,
},
scaleLabel: {
display: true,
labelString: yAxisDisplayLabel,
},
}],
xAxes: [{
categoryPercentage: isMobile ? 0.8 : 0.7,
barPercentage: 1,
gridLines: {
display: false,
drawBorder: false,
},
}],
},
legend: {
display: false,
},
scaleBeginAtZero: true,
});
The simple, non-technical, answer is of course to write Unit: €/m2 somewhere else on the chart and not an every bar.
I have a really simple Chart.js bar graph where I'm not labeling the x-axis. It looks something like this:
I want my bars to be centered along the x-axis instead of left-aligned as is shown in the pic above. Any ideas? Here's what my data looks like:
datasets: [{
label: 'Blueberries',
data: [this.get('fruit').bluebs[0]],
borderColor: 'blue',
fill: false,
lineTension: 0,
borderDash: [10,5]
}, {
label: 'Apples',
data: [this.get('fruit').apples[1]],
borderColor: 'red',
fill: false,
lineTension: 0.1
}]
And here is my config:
return {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
display: false,
ticks: {
scaleBeginAtZero: false
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
fontSize: 12,
fontFamily: 'Lato, sans-serif'
},
scaleLabel: {
display: true,
labelString: 'Fruits Counted',
fontStyle: 'bold',
fontFamily: 'Lato, sans-serif'
}
}]
},
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: '#333',
fontFamily: 'Lato, sans-serif',
}
}
};
Also would love it if the person who downvoted me would tell me why so I can actually take action on it. :/
The default behavior of chart.js is to center charts, Looking at the picture I am doubting that you have supplied two values in the labels array of data (Not sure) if that's not the case please see this fiddle (http://jsfiddle.net/m5rq6bdj/2/) or the below code, which may help.
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
label: 'Blueberries',
data: [2],
borderColor: 'blue',
fill: false,
lineTension: 0,
borderDash: [10,5]
}, {
label: 'Apples',
data: [1],
borderColor: 'red',
fill: false,
lineTension: 0.1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
display: false,
ticks: {
scaleBeginAtZero: false
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
fontSize: 12,
fontFamily: 'Lato, sans-serif'
},
scaleLabel: {
display: true,
labelString: 'Fruits Counted',
fontStyle: 'bold',
fontFamily: 'Lato, sans-serif'
}
}]
},
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: '#333',
fontFamily: 'Lato, sans-serif',
}
}
}
});