[Chartjs]-Add multiple lines as Y axis title in chartJs

by

1👍

You will have to update to version 3 of the lib to use this feature, here you can specify the text of the scale title also as an array to make it multi lined.

The angular wrapper stable build only supports v2 atm, they have a beta build available for v3 so you will need to install the wrapper with the next tag behind it to install the beta version or specify the version you want in your package.json

Plain example:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      y: {
        title: {
          display: true,
          text: ['first line', 'second line'] // array so it becomes multi lined
        },
        ticks: {
          reverse: false
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js" integrity="sha512-opXrgVcTHsEVdBUZqTPlW9S8+99hNbaHmXtAdXXc61OUU6gOII5ku/PzZFqexHXc3hnK8IrJKHo+T7O4GRIJcw==" crossorigin="anonymous"></script>
</body>

Leave a comment