0
210
ViewsLost column of bar chart in Chart.js
I display bar chart by chart.js but I get some problems. This is my data array data: [80, 81, 80, 64, 65, 80, 70, 75, 67, 85, 66, 50]. The last data value is 50 or 10 or 20 and it does not display ( Picture 1 ). If I change to 50.5 or 10.5, it can display but it is too small ( Picture 2 ). Anyone who knows my problem please help me. Thank you so much.
Here is my code :
//WidgetChart 5
var ctx = document.getElementById("widgetChart5");
if (ctx) {
ctx.height = 220;
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [
{
label: "My First dataset",
data: [80, 81, 80, 64, 65, 80, 70, 75, 67, 85, 66, 50.5],
borderColor: "transparent",
borderWidth: "0",
backgroundColor: "#ccc",
}
]
},
options: {
maintainAspectRatio: true,
legend: {
display: false
},
scales: {
xAxes: [{
display: false,
categoryPercentage: 1,
barPercentage: 0.75
}],
yAxes: [{
display: false
}]
}
}
});
}
Picture 1 : The last data value ( 50 ) does not display
Picture 2 : Now if change to 50.5 it is still too smal
1 answers
Answer question0
I can't tell for certain based on your screenshot, but I suspect that the chart is actually much taller than you can see but it is being hidden by its container (perhaps with overflow hidden). If you turn off the "responsive" option on the chart then you might find that you're able to see the entire chart. I've found that the "responsive" option usually means that the chart is much taller than I'd expect.
//WidgetChart 5
var ctx = document.getElementById("widgetChart5");
if (ctx) {
ctx.height = 220;
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [{
label: "My First dataset",
data: [80, 81, 80, 64, 65, 80, 70, 75, 67, 85, 66, 50],
borderColor: "transparent",
borderWidth: "0",
backgroundColor: "#ccc",
}]
},
options: {
responsive: false,
maintainAspectRatio: true,
legend: {
display: false
},
scales: {
x: {
display: false,
categoryPercentage: 1,
barPercentage: 1
},
y: {
display: false
}
}
}
});
}<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id=widgetChart5 height="240" width="320"></canvas>