0
371
Viewshow to manipulate with the y-axis values in chartjs
Hi there to all of you,
How can I control the Y-axis values in Chart.js library? The data are displayed different in each chart, even though the code is the same for each chart.
The data in the first chart are shown like this
while in the second chart the data are like this
How can I make in that way that each chart has values +5, like 5, 10, 20, 25 because I never have values with type float.
Code looks like this:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: data.map(x => moment(x.date).format("MMM Do")),
datasets: [{
data: data.map(x => x.premium),
backgroundColor: '#ffec87',
borderColor: "#ffec87",
borderWidth: 2,
borderStyle: 'dotted'
}]
},
options: {
scales: {
xAxis: { grid: { display: false } },
yAxis: { grid: { borderDash: [3, 5] } }
}
}
});
Thanks a lot.
2 answers
Answer question0
in the options scales, yAxis add a stepsize
options: {
scales: {
xAxis: { grid: { display: false } },
yAxis: {
grid: { borderDash: [3, 5] },
ticks: {stepSize: 5}
}
}
}
0
Alternatively you could set the min/max of the y-axis scale as shown in this example
https://www.chartjs.org/docs/latest/samples/scales/linear-min-max.html
scales: {
y: {
min: 0,
max: 25,
}
}
I just found the place in the documentation where Amin's solution is discussed, I figure I'd put a reference here for convenience.
https://www.chartjs.org/docs/latest/samples/scales/linear-step-size.html
y: {
title: {
display: true,
text: 'Value'
},
min: 0,
max: 100,
ticks: {
// forces step size to be 50 units
stepSize: 5
}
}