Pie chart, add text in the middle?

[crystalcode]

I am using a pie chart.

Is it possible to add a text (percentage, like 33%) in the middle of the pie chart?

[Shashi Ranjan]

@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

[crystalcode]

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?

[Vishwas R]

@crystalcode,

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

[crystalcode]

This is really awesome. Thanks for this.
Is it also possible to style the subtitle?

Kind regards
Jens

[Vishwas R]

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.

—
Vishwas R
Team CanvasJS

[crystalcode]

Worked perfectly! Thanks!

[Author]

Posts