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.