score:11

Accepted answer

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>


Related Query

More Query from same tag