Making fixed y-Axis scales with react-chartjs-2 - reactjs

Question

i want to create a chart with Chart.js and React that has a persistant yAxis ranging form -15 to 15 with a stepSize of 5.
As an example i copied the dynamic Bar Chart that can be found here:
https://reactchartjs.github.io/react-chartjs-2/#/dynamic-bar
the documentation of charjs.org mentions min and max properties of the Axis here:
https://www.chartjs.org/docs/3.2.0/samples/scales/linear-min-max.html
but react-chartjs-2 seems to ignore these values. I tried:
Old Naming: scales.yAxis
New Naming: scales.y
adding "scaleOverride : true" to options.scales and option.scales.y
inside the "ticks"
outside the "ticks"
Removing everything in the config.scales.y but min, max and stepsize with old and new naming
My current App.js:
import React, { useEffect, useState } from 'react';
import { Bar } from 'react-chartjs-2';
const rand = () => Math.round(Math.random() * 20 - 10);
const genData = () => ({
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: 'Scale',
data: [rand(), rand(), rand(), rand(), rand(), rand()],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
],
borderWidth: 1,
},
],
});
const options = {
scales: {
scaleOverride : true,
y: [
{
type: "time",
ticks: {
min: 0,
max: 150,
stepSize: 20
},
},
],
x: [
{
type: "Amp",
ticks: {
},
},
],
},
};
function App() {
const [data, setData] = useState(genData());
useEffect(() => {
const interval = setInterval(() => setData(genData()), 1000);
return () => clearInterval(interval);
}, []);
return (
<>
<Bar className="Linechart" data={data} options={options} />
</>
);
};
export default App;
Can someone please explain to me what is the correct way to set the y-Axis to a fixed range? Thanks in advance.

Answer 1

It was a simple syntax error. Using this config works:
const options = {
scales: {
y:
{
min: -15,
max: 15,
stepSize: 5,
},
x:
{
},
},
};

Answer 2

According to the documentation, use this
scales: {
y: {
min: -1,
max: 1,
ticks: {
stepSize: 1,
},
},
},
Basically, add the stepSize inside the ticks prop

Answer 3

The above accepted answer did not seem to work for me.
I found this solution and it works just fine customising the scale on the y-axis of the bar chart using react-chartjs-2 library.
const chartOptions = {
scales: {
yAxes: [{
ticks: {
beginAtZero: false,
min: 0,
stepSize: 2,
callback: function(value) {
return `${value}`
}
}
}]
}
}
use this Object in your barchart like so:
<Bar data={data} options={chartOptions} />