Chartjs-Bar chart not starting at 0

by

2👍

✅

This can be accomplished since Chart.js v2.9.0, which supports floating bars. Individual bars can since be specified with the syntax [min, max]. 

new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: [1, 2, 3, 4, 5, 6, 7],
    datasets: [{
      type: 'bar',
      label: 'Green Bars',
      backgroundColor: 'green',
      data: [[3, 9.5],[2, 8.5],[4, 7],[1.5, 5.5],[3, 6.5],[3, 8.5],[4, 9]],
    }]
  },
  options: {
    responsive: true,
    legend: {
       display: false
    },
    scales: {
      yAxes: [{
        type: 'linear',
        ticks: {
          min: 0,
          max: 10,
          stepSize: 1
        }
      }],
    }
  }
});
canvas {
  max-width: 260px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="10" height="10"></canvas>

Leave a comment