简体   繁体   中英

Chart.js Subtitle won't display

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.

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 .

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> 

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

Check if you have registered the SubTitle class to ChartJS

ChartJS.register(
  Title,
  SubTitle,
);

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM