[Chartjs]-How do I force Chart.js axes min and max with react-chartjs-2?

by

5👍

For the current version of react-chartjs-2 (3/13/2022) the code below worked for me but the answer by HartleySan didn’t change the output.

I’m using Nextjs with
chart.js: 3.7.1,
react-chartjs-2: 4.0.1,

<Line
    datasetIdKey="id"
    data={data}
    options={{
        scales: {
          yAxis: {
            min: 0,
            max: 100,
          },
          ....
        },
    }}
/>

4👍

Ugh! So frustrating, but I finally found the answer. The following worked for me:

{
    scales: {
        xAxes: [{
            ticks: {
                beginAtZero: true,
                max: 1000,
                min: 0
            }
        }],
        yAxes: [{
            ticks: {
                beginAtZero: false,
                max: 8,
                min: -3
            }
        }]
    }
}

Leave a comment