Chartjs-How to change orientation of the main y-axis label in charts.js?

by

1👍

✅

As a workaround, you could add a second y-axis and define it as follows:

{
  gridLines: {
    display: false
  },
  ticks: {
    maxTicksLimit: 3,
    callback: (value, index) => index == 1 ? 'Scale Label' : ''
  }
}

Please take a look at below code snippet and see how it works.

new Chart(document.getElementById('myChartAxis'), {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
        label: 'WARNINGS',
        data: [1, 2, 3, 2],
        borderColor: 'rgb(255, 159, 64)',
        backgroundColor: 'rgba(255, 159, 64, 0.2)',
        fill: false
      },
      {
        label: 'ERRORS',
        data: [1, 2, 1, 3],
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        fill: false
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
          ticks: {
            beginAtZero: true,
            stepSize: 1
          }
        },
        {
          gridLines: {
            display: false
          },
          ticks: {
            maxTicksLimit: 3,
            callback: (value, index) => index == 1 ? 'Scale Label' : ''
          }
        }
      ]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChartAxis" height="90"></canvas>

Leave a comment