Home forums Using CanvasJS Pie chart, add text in the middle?

Tagged: 

This topic contains 6 replies, has 3 voices, and was last updated by  crystalcode 2 months, 1 week ago.

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

    I am using a pie chart.

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

    #24204

    @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

    #24206

    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?

    #24216

    @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

    #24217

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

    Kind regards
    Jens

    #24229

    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

    #24268

    Worked perfectly! Thanks!

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

You must be logged in to reply to this topic.