Here's a simple chart.js horizontal bar chart I'm using:
var myBarChart = new Chart(ctx,{
type: 'horizontalBar',
data: {
labels: [
"Foo",
"Bar",
"Baz"
],
datasets: [
{
data: [725000, 600000, 900000],
backgroundColor: [
"#ccf6ec",
"#ff6654",
"#009784"
],
hoverBackgroundColor: [
"#ccf6ec",
"#ff6654",
"#009784"
]
}]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}],
}
}
});
If I change the values to be closer to each other I see the three bars. I need it to draw the bars so they are always visible, even if the values are widely different.
Is there a configuration I missed? How can I fix this?
Bar charts are created by setting type to bar (to flip the direction of the bars, set type to horizontalBar ). The colors of the bars are set by passing one color to backgroundColor (all bars will have the same color), or an array of colors.
For some reason, chart.js uses the smallest amount in data as minimum ticks value. Simply adding ticks.min: 0
apparently solves the issue:
var ctx = document.getElementById('chart')
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: [
"Foo",
"Bar",
"Baz"
],
datasets: [{
data: [725000, 600000, 900000],
backgroundColor: [
"#ccf6ec",
"#ff6654",
"#009784"
],
hoverBackgroundColor: [
"#ccf6ec",
"#ff6654",
"#009784"
]
}]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
display: false,
ticks: {
min: 0
}
}],
yAxes: [{
display: false
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" width="400" height="400"></canvas>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With