You must be logged in to post your query.
Home › Forums › Chart Support › Pie chart, add text in the middle?
Tagged: pie chart
I am using a pie chart.
Is it possible to add a text (percentage, like 33%) in the middle of the pie chart?
You can use title or subtitles to display text at center of the chart by setting its property verticalAlign to “center” and dockInsidePlotArea to true. Below is the code snippet for the same.
text: "Doughnut Chart",
Please take a look at this JSFiddle for complete code.
This is indeed interesting, only drawback is that I would actually like to keep the titles where they are and add this in the center in addition. Is it possible?
As suggested by @shashiranjan, title & subtitle can be positioned in the center of the pie/doughnut by setting dockInsidePlotArea and verticalAlign properties.
As your requirement includes having a title to the top of the chart, you can use subtitles to be positioned at the center of the chart ( You can add as many subtitles as you want to a chart – so even if you like to have a subtitle at the top of the chart, you can still add another subtitle at the center of the chart). Please find the code-snippet for the same below.
text: "Doughnut Chart"
text: "Subtitle 1"
text: "Subtitle 2",
Please take a look at this updated JSFiddle for complete code.
This is really awesome. Thanks for this.
Is it also possible to style the subtitle?
Yes, it’s possible to style subtitle by changing fontColor, fontSize, fontFamily, backgroundColor, margin, padding and other available properties. Please take a look at documentation on subtitles for complete list of available customization options.
Worked perfectly! Thanks!
You must be logged in to reply to this topic. Login/Register