Horizontal bar chart in chart.js

Question

I am trying to draw a horizontal bar chart using chart.js 2.3.0 -

var MeSeContext = document.getElementById("MeSeStatusCanvas").getContext("2d"); var MeSeData = { labels: [ "ME", "SE" ], datasets: [ { label: "Test", data: [100, 75], backgroundColor: ["#669911", "#119966" ], hoverBackgroundColor: ["#66A2EB", "#FCCE56"] }] }; var MeSeChart = new Chart(MeSeContext, { type: 'horizontalBar', data: MeSeData, options: { scales: { yAxes: [{ stacked: true }] } } }); 

But he shows only one bar. What did I miss here?

Answer 1

You can see only one diagram, because the lowest value of your data (here 75) is the restriction on the scale on the left.

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

---

You have two ways to fix this:

• Set the min property for 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 min set to 60 in this jsFiddle :

  

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

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

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