25👍
Here’s one way:
your yAxes is an Array [] with objects in it {}, so you need to add another yScale to it, here an example:
scales: {
yAxes: [{
display: true,
position: 'right',
ticks: {
beginAtZero: true
}
}, {
display: true,
position: 'left',
ticks: {
beginAtZero: true,
max: 45,
min: 0,
stepSize: 5
}
}]
}
Live demo: Chart.js Double yAxis
Notice you have to reformat one of the new axis to conform to the default, you might need to format both or tie those parameters to your data if it’s going to change depending on what you want it to look like.
- [Chartjs]-Chart.js – how to disable everything on hover
- [Chartjs]-How to modify chartjs tooltip so i can add customized strings in tooltips
1👍
The solution of @Keno didn’t worked for me. Think because my chart needed to be min: 1000
and not min: 0
.
What worked for me was:
scales: {
yAxes: [{
display: true,
position: 'right',
ticks: {
beginAtZero: false,
max: 2000,
min: 1000,
stepSize: 100
}
}, {
display: true,
position: 'left',
ticks: {
beginAtZero: false,
max: 2000,
min: 1000,
stepSize: 100
}
}]
}
- [Chartjs]-ChartJS – Draw chart with label by month, data by day
- [Chartjs]-Chart.js is not respecting my container dimensions
0👍
This is what works for me, but I still need to display none the scal at the left side
scales: {
myScale: {
type: 'linear',
position: 'right',
}
}
Source:stackexchange.com