Home forums Chart Support Pie chart, add text in the middle?


Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #24198

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



    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


    Worked perfectly! Thanks!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.