I'd like to have more spacing between the bars in my horizontal bar graph. It looks terrible on a mobile device, and barely acceptable on a desktop browser. How can I accomplish this?
ChartJs Version: 2.4.0
function renderBarChart(chartDomID, title, labels, dataPoints, barColor) {
var ctx = document.getElementById(chartDomID).getContext("2d");
var chart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: labels,
datasets: [
{
label: title,
data: dataPoints,
fill: false,
pointBorderColor: barColor,
backgroundColor: barColor,
borderColor: barColor
}
]
},
options: {
responsive: true,
scales: {
yAxes: [{
display: true,
ticks: {
// Suggest to start the y-axis at 0, if ChartJS thinks it makes sense.
suggestedMin: 0
}
}]
},
legend: {
display: false
}
}
});
Mobile View

Desktop View

You have to add width and height as an example here.
<canvas id="myChart" width="700" height="900"></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