Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chart.js - How to display title in multiple lines?

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.

enter image description here

like image 222
sonlexqt Avatar asked Mar 28 '18 19:03

sonlexqt


People also ask

How to create a chart with multiple lines in JavaScript?

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.

How do I create a vertical line chart in HTML?

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.

What are the options on the line chart?

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.

How do I display labels on a line chart in Excel?

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.


1 Answers

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

enter image description here

Hope this helps you.

like image 78
Seethapriyanka Peddada Avatar answered Oct 05 '22 07:10

Seethapriyanka Peddada