skone
Posts: 18
Joined: Mon Apr 19, 2021 2:41 pm

Center text in Pie?

Hi,

I am using a pie chart with innerSize set to 70%. I would like to add some text into the center. I have seen a couple of solutions on stackoverflow, but they dont seem to be responsive. I also doing this in Angular and would like to keep jquery and other third parties out. Here is a jsfiddle I created.

https://jsfiddle.net/k3nrhsma/1/

Can you help to show how I can center a text in the chart?

Thanks
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Center text in Pie?

Hi skone,

Thanks for contacting us with your question.

There are few methods to draw such text, but I would suggest using SVGRenderer. The positioning is easy and reliable and also there shouldn't be any issues with responsiveness.
Demo:https://jsfiddle.net/BlackLabel/Lst0andx/
API reference:https://api.highcharts.com/class-refere ... VGRenderer
Related SO topic: https://stackoverflow.com/questions/973 ... highcharts

Let me know if you have any further questions!
Best regards!
Mateusz Bernacik
Highcharts Developer
skone
Posts: 18
Joined: Mon Apr 19, 2021 2:41 pm

Re: Center text in Pie?

Hi, Thanks for providing the demo. But it does not seem to work when I resize the jsfiddle pane. Try resizing your demo

See attached image.
Attachments
Cursor_and_Pie_chart_-_JSFiddle_-_Code_Playground.png
Cursor_and_Pie_chart_-_JSFiddle_-_Code_Playground.png (54.4 KiB) Viewed 749 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Center text in Pie?

skone,

Thanks for catching that mistake. It behaves like that because every time render event is triggered the text is being drawn. Simple solution - check if text already exists and if so destroy it before creating new one.
Demo: https://jsfiddle.net/BlackLabel/yrd1Lg83/

Best regards!
Mateusz Bernacik
Highcharts Developer
skone
Posts: 18
Joined: Mon Apr 19, 2021 2:41 pm

Re: Center text in Pie?

Thanks. That works. There seems to be some missing types in Typescript. I am getting this error:
Property 'center' does not exist on type 'Series'.ts(2339)
on this line:

Code: Select all

const textX = chart.plotLeft + (chart.series[0].center[0]);
Also seeing this error:
Property 'centerText' does not exist on type 'Chart'.ts(2339)
on this line:

Code: Select all

if (chart.centerText) chart.centerText.destroy()
skone
Posts: 18
Joined: Mon Apr 19, 2021 2:41 pm

Re: Center text in Pie?

mateusz.b is there a solution for the typescript errors?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Center text in Pie?

Hello skone,

The error in this case is self-explanatory - such type doesnt exist. You can either slap as any type (https://stackblitz.com/edit/highcharts- ... ine-x9yg4l), but it is more a band-aid than a proper solution :D , or extend interface (https://stackblitz.com/edit/highcharts- ... ine-dzkszx)

Let me know if that was what you were looking for!
Best regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”