1👍
✅
Based on the code found at Create Multiple Axis from the
Chart.js documentation, this can be done as follows:
const data = [20, 50, 78, 24, 18, 35];
const maxValue = Math.max.apply(null, data);
var myChart = new Chart("myChart", {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'My Dataset',
data: data
}]
},
options: {
tooltips: {
mode: 'x',
callbacks: {
label: (tooltipItem, data) => {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
var percent = Math.round(1000 / maxValue * tooltipItem.yLabel) / 10;
return label + ' ' + tooltipItem.yLabel + ' (' + percent + '%)';
}
}
},
scales: {
yAxes: [{
type: 'linear',
ticks: {
min: 0,
max: maxValue,
stepSize: maxValue / 10,
callback: value => Math.round((100 / maxValue * value)) + '%'
}
}, {
type: 'linear',
position: 'right',
gridLines: {
display: false
},
ticks: {
min: 0,
max: maxValue,
stepSize: 1,
autoSkip: false,
callback: value => value % 10 == 0 || value == maxValue ? value : ''
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>
Source:stackexchange.com