Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

135
Views
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?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!