elwyn5150
Posts: 7
Joined: Tue Jan 24, 2023 3:27 am

Tooltips centred on pie chart slices

I am trying to create a donut-shaped pie chart that shows device usage.
Whenever the user mouseovers a slice of the pie chart, it should:
  • show a white dot in the centre (inside) the arc of the pie slice
  • show the custom tooltip to either the left or right of the white dot, depending on which size the slice is on

Eventually, I will replace parts with PHP passing values from a database into the Javascript. I will probably move the tooltip HTML into the main HTML body and use jQuery to show and hide the tooltip.

This is my code so far:
https://jsfiddle.net/elwyn5150/4a26hskq/4/
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Tooltips centred on pie chart slices

Hello,

Welcome to our forum and thanks for contacting us with your question!

You can draw on the chart using the render method.
API: https://api.highcharts.com/class-refere ... rer#circle

You can assign callback functions for the options point.events.mouseOver (https://api.highcharts.com/highcharts/s ... .mouseOver) and point.events.mouseOut (https://api.highcharts.com/highcharts/s ... s.mouseOut), e.g. using the renderer there.

By default, the pie chart tooltip has followPointer enabled. To stop at a point, you can disable this option.
API: https://api.highcharts.com/highcharts/t ... lowPointer

The position of the tooltip can be changed using the positioner option.
API: https://api.highcharts.com/highcharts/t ... positioner

I hope you will find it useful
Best regards!
Dawid Draguła
Highcharts Developer
elwyn5150
Posts: 7
Joined: Tue Jan 24, 2023 3:27 am

Re: Tooltips centred on pie chart slices

Hi,

Thanks for yout response.

I guess I am still getting used to the flexibility of options in Highcharts.

Is there a simple way to calculate the center coordinates of the pie chart slice? I was wondering if using the SVG render can do this by finding the coordinates of the middle of the two arcs, drawing a line between them, and finding the middle of the line.
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Tooltips centred on pie chart slices

Hi,

Each slice is a path SVGElement. You can get to its coordinates ('d' attribute) as in the demo below. Maybe you'll be able to use them to determine the centre of slices.

Demo: https://jsfiddle.net/BlackLabel/mdoeb20r/

​If you have further inquiries, you may reach out to me at any time.
Best regards!
Dawid Draguła
Highcharts Developer
elwyn5150
Posts: 7
Joined: Tue Jan 24, 2023 3:27 am

Re: Tooltips centred on pie chart slices

At the moment, I'm still trying to find the coordinates of the midpoint of each arc generated by Highcharts .


https://jsfiddle.net/elwyn5150/a6yqLzcm/5/ is my code so far.
I can split the path into segments for each line. I'm just trying to put a red circle in the midpoint of the first arc to start with. The positioning is wrong but consistent. Is there a translation and/or transformation that needs to be applied to get it in the right spot?
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Tooltips centred on pie chart slices

Hi,

I've got the idea to use data labels' position. I moved them using basic API options so that they should be in the middle and turned them off, but I rendered the circles in their positions. See the demo below.

Demo: https://jsfiddle.net/BlackLabel/hyns7mjt/

If I may clarify any issues/matters I am available at your convenience.
Regards!
Dawid Draguła
Highcharts Developer
elwyn5150
Posts: 7
Joined: Tue Jan 24, 2023 3:27 am

Re: Tooltips centred on pie chart slices

Thanks. That's really helpful.

Your code is really understandable. My manager was saying there should be something in Highcharts to do most of what I need done without the complexity of processing the actual SVG paths.
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Tooltips centred on pie chart slices

You're welcome! In case of any further questions, feel free to contact us again.

Best regards!
Dawid Draguła
Highcharts Developer
elwyn5150
Posts: 7
Joined: Tue Jan 24, 2023 3:27 am

Re: Tooltips centred on pie chart slices

I think I'm about 90% there. Both have some slight issues.

Method 1: https://jsfiddle.net/elwyn5150/7d32mpuj/97/

The tooltip and pointer aren't perfectly pointing to the dot.
I haven't worked out how to use positioner() to correct this and using positioner() causes the tooltip pointer to not appear.

Method 2: https://jsfiddle.net/elwyn5150/3fk5why9/6/

I'm using chart.renderer.html() to create the tooltip. The tooltip doesn't have the pointer, nor background, etc. I also need to look up how to apply CSS to tables inside tooltips.
I'm probably going to focus working on this one because it's possible/likely that the Graphic Designer will want the tooltip and pointer to be to the left or right of the dot.
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Tooltips centred on pie chart slices

Hi,

Instead of renderer.html, I recommend using callout-shaped renderer.label. The default tooltip is rendered in the same way. You can put html code in it. See: https://api.highcharts.com/class-refere ... erer#label

Demo: https://jsfiddle.net/BlackLabel/02gd6cuy/

Regards!
Dawid Draguła
Highcharts Developer
elwyn5150
Posts: 7
Joined: Tue Jan 24, 2023 3:27 am

Re: Tooltips centred on pie chart slices

Thanks.I like how you have the custom tooltip and point code together in the same mouseOver function - it's neater and tidier.

I've added a legend to the chart and code to put the tooltip on the left or right depending on where the centerpoint is:
https://jsfiddle.net/elwyn5150/kym6cgw3/92/

I was wondering there is something in the options to get mouseOver on the legend to show the centerpoint dot and tooltip.
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Tooltips centred on pie chart slices

Hi,

Unfortunately, our API does not have the option to access the legend item hover event. I found an issue on our official GitHub asking for a feature to introduce this functionality. There you can find there workarounds, ask for an update and vote for the introduction of this issue by clicking the reaction with a thumbs-up emoji.

See: https://github.com/highcharts/highcharts/issues/18198

Kind regards!
Dawid Draguła
Highcharts Developer
elwyn5150
Posts: 7
Joined: Tue Jan 24, 2023 3:27 am

Re: Tooltips centred on pie chart slices

I ended up getting it to legend mouseOver and mouseOut to work: https://jsfiddle.net/elwyn5150/kym6cgw3/138/ (ignore the missing image, which exists on my development server)

I based my code off: viewtopic.php?t=39679
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Tooltips centred on pie chart slices

Hi,

I'm glad it works and thanks for sharing the solution!

In case of any further questions, feel free to contact us again.
Regards!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Usage”