Chart.js Subtitle won't display

Question

I can't get the subtitle for my pie chart to work. It just won't show.

I was trying this: https://www.highcharts.com/docs/chart-concepts/title-and-subtitle

options: {
    pieceLabel: {
        showZero: true,
        fontColor: '#fff',
        fontFamily: "'Maven Pro', sans-serif",
        position: 'default'
    },
    title: {
        display: true,
        position: 'top',
        text: 'Screened',
        fontSize: 14
    },
    subtitle:{
        text: 'Subtitle',
    },
    legend: {
        display: false
    }
}

My chart displays fine, so I have only shared the options part of the code.

I'm not sure if subtitles are supported by chart.js. If not, suggestions for line break in title or any other substitute are welcome.

score 13 · Accepted Answer · answered Nov 28 '17 at 12:56

13

In the title text property, you can pass in a string array and each item will break onto a new line.

text: ['Title','Subtitle'],

Here is a working example.

answered Nov 28 '17 at 12:56

David

547
1
5
19

I tried, it shows on the same line, with a comma in between. – Leah Nov 29 '17 at 06:56
1

Which version of the chart.js library are you using? My example uses 2.7.0. If I use 2.4.0, I see that the elements are separated by commas. – David Nov 29 '17 at 09:19

score 5 · Answer 2 · answered Aug 23 '22 at 00:58

5

Check if you have registered the SubTitle class to ChartJS

ChartJS.register(
  Title,
  SubTitle,
);

answered Aug 23 '22 at 00:58

Preston Ong

61
1
3

Note to anyone else who comes here: this is the correct answer. – Byron Jones Jan 09 '23 at 12:20

score 2 · Answer 3 · answered Oct 19 '18 at 08:19

2

For anyone still interested in this I've made a simple subtitle plugin: https://www.npmjs.com/package/chartjs-subtitle https://github.com/jeredmasters/chartjs-subtitle

This lets you have different styling compared to the primary title

answered Oct 19 '18 at 08:19

Jered

169
11

How to add in browser? – Taffarel Xavier Oct 07 '20 at 21:09

score -1 · Answer 4 · answered Nov 28 '17 at 11:28

-1

Try this example:

Highcharts.chart('container', {

    chart: {
        marginTop: 80
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    subtitle: {
        text: 'This text has <b>bold</b>, <i>italic</i>, <span style="color: red">coloured</span>, <a href="http://example.com">linked</a> and <br/>line-broken text.'
    },

    series: [{
        data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

answered Nov 28 '17 at 11:28

Samuel Rizzon

109
5

I'm using Chart.js, not Highcharts. It's a pie chart. I'm not sure how to change the format of the js either. – Leah Nov 28 '17 at 11:31
1

Bit confusing to link to the highcharts documentation in your question. [Chart.js does not support subtitles](https://github.com/chartjs/Chart.js/issues/3786), so adding it to the options will not work. – David Nov 28 '17 at 11:55

Chart.js Subtitle won't display

4 Answers4