ChartJS 条没有显示简单的数据点

Question

Here's a simple chart.js horizontal bar chart I'm using:

var myBarChart = new Chart(ctx,{
  type: 'horizontalBar',
  data: {
    labels: [
        "Foo",
        "Bar",
        "Baz"
    ],
    datasets: [
    {
        data: [725000, 600000, 900000],
        backgroundColor: [
          "#ccf6ec",
          "#ff6654",
          "#009784"
        ],
        hoverBackgroundColor: [
          "#ccf6ec",
          "#ff6654",
          "#009784"
        ]
    }]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        display: false
      }],
      yAxes: [{
        display: false
      }],
    }
  }
});

---

If I change the values to be closer to each other I see the three bars. I need it to draw the bars so they are always visible, even if the values are widely different.

Is there a configuration I missed? How can I fix this?

Answer 1

For some reason, chart.js uses the smallest amount in data as minimum ticks value. Simply adding ticks.min: 0 apparently solves the issue:

 var ctx = document.getElementById('chart') var myBarChart = new Chart(ctx, { type: 'horizontalBar', data: { labels: [ "Foo", "Bar", "Baz" ], datasets: [{ data: [725000, 600000, 900000], backgroundColor: [ "#ccf6ec", "#ff6654", "#009784" ], hoverBackgroundColor: [ "#ccf6ec", "#ff6654", "#009784" ] }] }, options: { legend: { display: false }, scales: { xAxes: [{ display: false, ticks: { min: 0 } }], yAxes: [{ display: false }], } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> <canvas id="chart" width="400" height="400"></canvas>