Chartjs-Show name on yaxis in chart.js

by

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

Leave a comment