Home › forums › Using CanvasJS › Pie chart, add text in the middle?
Tagged: pie chart
This topic contains 6 replies, has 3 voices, and was last updated by crystalcode 1 week, 5 days ago.
I am using a pie chart.
Is it possible to add a text (percentage, like 33%) in the middle of the pie chart?
@crystalcode,
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 as shown in this JSFiddle.
____ Shashi Ranjan Team CanvasJS
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. However as your requirement includes having a title to the top of the chart, you can use subtitle 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 take a look at this updated JSFiddle.
— Vishwas R Team CanvasJS
This is really awesome. Thanks for this. Is it also possible to style the subtitle?
Kind regards Jens
Jens,
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.