Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vertical spacing in horizontal ChartJS Bar Graph

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 Mobile View

Desktop View Desktop View

like image 405
contactmatt Avatar asked Dec 05 '25 10:12

contactmatt


1 Answers

You have to add width and height as an example here.

<canvas id="myChart" width="700" height="900"></canvas>
like image 116
Prae Pawanutkultorn Avatar answered Dec 07 '25 21:12

Prae Pawanutkultorn