[Chartjs]-Horizontal bar chart in chart.js

38đź‘Ť

âś…

You can see only one chart because the lowest value of your data (75 here) is the scale’s left limit.

As shown in the following screenshot of your code’s result, if you hover on the scale, you can still see the associated data, which means it is here.

enter image description here


You have two ways to fix this :

  • Set the min property of the xScale ticks to the value you want (enough to see it of course) :

    var MeSeChart = new Chart(MeSeContext, {
        type: 'horizontalBar',
        data: MeSeData,
        options: {
            scales: {
                xAxes: [{
                    ticks: {
                        min: 60 // Edit the value according to what you need
                    }
                }],
                yAxes: [{
                    stacked: true
                }]
            }
        }
    });
    

    You can see the result with a min set to 60 on this jsFiddle :

    enter image description here

  • Set the beginAtZero property to true, which is the same as setting min to 0 :

    xAxes: [{
        ticks: {
            beginAtZero: true
        }
    }],
    

    You can see the result with the beginAtZero property set to true on this jsFiddle.

Leave a comment