CODEWITHSUNDEEP
javascriptchart.js
Paco Casnueva
Paco Casnueva

Reputation: 89

Chart JS tick options not working for y axis

I have been struggling to make a chart.js line chart start at 0 when all of the values are 0. If all of the data of a dataset is 0 the y axis will always show values below 0 which I don't want there.

Here is the example:

<div class="container">
    <canvas id="lineChart"></canvas>
    <script>
        var ctx = document.getElementById('lineChart');
        var lineChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [1,2,3],
                datasets: [{
                    data: [0, 0, 0]
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        ticks: {
                            beginAtZero:true
                        }
                    }
                }
            }
        });
    </script>
<div>

As you can see I am changing the options the scales as suggested in the documentation here (apparently there has been migration and this is the way to go in v3, which is what I am using). But the graph still won't start at 0: chart example

Any axis options other than the ticks work correctly. Any ideas of what I might be doing wrong?

Upvotes: 2

Views: 2435

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31351

You tried to place the beginAtZero in the V2 place, in V3 you have to put it in the root of the scale object like so:

const options = {
  type: 'line',
  data: {
    labels: [1, 2, 3],
    datasets: [{
      label: '# of Votes',
      data: [0, 0, 0],
      borderColor: 'pink'
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>

For all changes between V2 and V3 you can read the migration guide

Upvotes: 2

Related Questions