Chart js data to start at zero

Question

That's how I set the data:

    const data = {
        labels: ['February', 'March'],
        datasets: [
            {
                label: 'My First dataset',
                backgroundColor: 'rgba(255,99,132,0.2)',
                borderColor: 'rgba(255,99,132,1)',
                borderWidth: 1,
                hoverBackgroundColor: 'rgba(255,99,132,0.4)',
                hoverBorderColor: 'rgba(255,99,132,1)',
                data: [5, 9]
            }
        ]
    };

But the first element sets the beginning of the axis:

But I want it to start from zero

adding the following doesn't help:

options: {
  scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}

I couldn't find another setting to do that on the docs.

I'm using this btw: https://www.npmjs.com/package/react-chartjs-2

Soutor

that should work for sure. where did you add the options? – Multifarious

Thanks, I didn't add the options at the right place but with the data... @ℊααnd – Soutor

The answers below didn't work for me, so I added a 0|0 data point with { x: 0, y: 0, r: 0 }, with datasets > data. – Forsta

Answer 1

Try Adding min to your options:

    var options = {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true,
            min: 0
          }    
        }]
      }
    };

Live Copepen: Chart.js Start at zero

Sarsaparilla

If you still have problems, your options are probably not being read, or are configured wrong, check out this example with options: github.com/gor181/react-chartjs-2/blob/master/example/src/… – Sarsaparilla

Answer 2

As per chart.js 3.7.1 version

Directly write "beginAtZero" in x or y not in ticks

   const options = {
    scales: {
         x: {
           beginAtZero: true,            
         },
         y: {
           beginAtZero: true,
         }
       }
    };

Laius

Answer 3

Replaced by:

const options = {
  scales: {
    y: {
      beginAtZero: true
    }
  }
};

It worked!

Illuminate