Horizontal bar chart in chart.js

Horizontal bar chart in chart.js

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

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

enter


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

  • 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.

Horizontal bar chart in chart.js

Leave a Reply

Your email address will not be published.