CODEWITHSUNDEEP
javascriptangularchart.jsng2-charts
Atul Stha
Atul Stha

Reputation: 1524

Add multiple lines as Y axis title in chartJs

I was trying to add a multiple-lined title for the Y-axis in my chart created by chartJs. I could find that the whole title for the chart can use an array of strings to do so but did not find any option to do the same for any of the axes.

I have used the following option to sow the title currently:

 scales: {
  yAxes: [
    {
      ticks: {
        beginAtZero: true,
      },
      scaleLabel: {
        display: true,
        labelString: "Deviation from average \n Total" //Multi line label
      },
    }
  ],

StackBlitz repro of the same.

Current output:

enter image description here

Expected Output:

enter image description here

Upvotes: 1

Views: 1297

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31331

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>

Upvotes: 1

Related Questions