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.

Reprobation

Answer 1

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.

Cowden

I tried, it shows on the same line, with a comma in between. – Reprobation

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. – Cowden

Answer 2

Check if you have registered the SubTitle class to ChartJS

ChartJS.register(
  Title,
  SubTitle,
);

Anticlockwise

Note to anyone else who comes here: this is the correct answer. – Perfecto

Answer 3

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

Potbelly

How to add in browser? – Naturalist

Answer 4

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>

Futhark

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. – Reprobation

Bit confusing to link to the highcharts documentation in your question. Chart.js does not support subtitles, so adding it to the options will not work. – Cowden