In chart.js, how to display title in multiple lines like shown below ? I try using title: 'Chart.js\nLine Chart'
and 'Chart.js<br>Line Chart'
but they didn't work.
To create a chart with multiple lines, we can just create a line chart that display multiple data sets. To do that, we first start with including the Chart.js library. Also, we add the moment.js library for formatting dates, and a canvas element for Chart.js to render the chart in.
A vertical line chart is a variation on the horizontal line chart. To achieve this you will have to set the indexAxis property in the options object to 'y' . The default for this property is 'x' and thus will show horizontal lines.
options - options for the whole chart The line chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a line is generally set this way.
We set the type property to 'line' to display line charts. Then we have the labels property to display the labels for the x-axis. In the datasets property, we set the value to an array. The array has the data property to set the y-axis value for where the dot is displayed.
try giving title as string[] array as shown in below example.
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
title: {
display: true,
text: ['Chart.js','Line Chart']
}
}
})
Please go through the reference for more details. http://www.chartjs.org/docs/latest/configuration/title.html
Hope this helps you.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With