简体   繁体   中英

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

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.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM