1👍
✅
You can pass Y labels and then your data matches to a Y label.
var options = {
type: 'line',
data: {
xLabels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
yLabels: ['', 'Request Added', 'Request Viewed', 'Request Accepted', 'Request Solved', 'Solving Confirmed'],
datasets: [{
label: '# of Votes',
data: ['', 'Request Added', 'Request Added', 'Request Added', 'Request Viewed', 'Request Viewed', 'Request Viewed'],
borderWidth: 1,
lineTension: 0
}]
},
options: {
scales: {
yAxes: [{
type: 'category',
ticks: {
reverse: true
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
canvas {
background-color: #eee;
}
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>
The other option you have is keep track of all the numbers you have and which label string label should corespond to that. Then in your Y axes tick config callback you can match the number you get to the nearest string and return that string.
Example from the docs adding a dollar sign (https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats) but instead of returning the original value you need to return the string you want to show
Source:stackexchange.com