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

Question

I'm trying to create a simple line chart with react-chartjs-2, and when I try to set the min/max values for the x- and y-axes, the values won't take.

I've tried all the following for options, and none of them are enforcing my specified mins and maxes:

1st attempt:

{
    scales: {
        x: {
            max: 1000,
            min: 0
        },
        y: {
            max: 8,
            min: -3
        }
    }
}

2nd attempt:

{
    scales: {
        x: {
            ticks: {
                max: 1000,
                min: 0
            }
        },
        y: {
            ticks: {
                max: 8,
                min: -3
            }
        }
    }
}

3rd attempt:

{
    scales: {
        x: {
            suggestedMax: 1000,
            suggestedMin: 0
        },
        y: {
            suggestedMax: 8,
            suggestedMin: -3
        }
    }
}

None of those seem to work though. What am I doing wrong / missing? Thank you.

As a side note, I find the Chart.js docs very confusing, and it's really hard to find valid examples online, especially since v1 and v2 of Chart.js seem to be fundamentally different.

You can still get the v2 documentation and samples of chart.js if you specify the version in the link like so: https://www.chartjs.org/docs/2.9.4/, https://www.chartjs.org/samples/2.9.4/ Or you can ask the developers of the react wrapper to update it so you can use v3 — LeeLenalee, Apr 13 '21 at 16:42

score 5 · Answer 1 · answered Mar 13 '22 at 09:07

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,
          },
          ....
        },
    }}
/>

answered Mar 13 '22 at 09:07

YSLdev

142
1
11

Thanks for the update, YSLdev. I wouldn't be surprised at all if my solution stopped working. The library is so poorly documented and difficult to figure out. – HartleySan Mar 13 '22 at 13:35
I agree. I actually learned working with it through stackoverflow answers rather than the docs :) – YSLdev Mar 16 '22 at 10:15
Yes, sad but true. The thing that makes it hard for me is a) the docs aren't great, and b) each version of the API seems to radically change stuff, so even SO answers quickly become wrong. – HartleySan Mar 16 '22 at 12:30

score 4 · Answer 2 · answered Apr 13 '21 at 15:23

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
            }
        }]
    }
}

answered Apr 13 '21 at 15:23

HartleySan

7,404
14
66
119

This worked for me. Where did you find the answer? The docs aren't very helpful – vt_todd Oct 18 '21 at 00:27
Sadly, I don't remember. I think it was a combination of "educated" guesses and putting together random pieces of information from disparate sources. Basically, a real pain in the butt. And yes, I agree that the Chart.js docs are not very good, not to mention the fact that there are three versions now, all with radically different APIs. – HartleySan Oct 18 '21 at 01:24
4

I also didn't get lucky with your answer, but it pointed me to the right direction! for me this worked: scales: { y: { ticks: { stepSize: 1 }, min: 0, max: 1000 } } – Sam Dec 09 '21 at 20:31

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

2 Answers2