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. Below is the code snippet for the same.

title:{
	text: "Doughnut Chart",
	verticalAlign: "center",
	dockInsidePlotArea: true
},

Please take a look at this JSFiddle for complete code.

____
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.

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.

title: {
    text: "Doughnut Chart"
},
subtitles: [{
    text: "Subtitle 1"
}, {
    text: "Subtitle 2",
    verticalAlign: "center",
    dockInsidePlotArea: true
}],

Please take a look at this updated JSFiddle for complete code.

—
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!