0👍
✅
Just stack the axes:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Black"],
datasets: [{
label: 'Dataset 1',
data: [10, 30, 50, 20, 25, 44, -10],
borderColor: 'red',
backgroundColor: 'red'
},
{
label: 'Dataset 2',
data: [10000, 30000, 50000, 20000, 25000, 44000, -10000],
borderColor: 'blue',
backgroundColor: 'blue',
yAxisID: 'y2',
}
]
},
options: {
scales: {
y: {
type: 'linear',
position: 'left',
stack: 'demo',
grid: {
borderColor: 'red'
},
title: {
display: true,
text: 'hello'
}
},
y2: {
offset: true,
position: 'left',
stack: 'demo',
grid: {
borderColor: 'blue'
},
title: {
display: true,
text: 'hello2'
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script>
</body>
Source:stackexchange.com