tylerm
Posts: 9
Joined: Wed Jul 20, 2022 9:07 pm

Allow drilling down to the deepest level on sunburst

I'd like to drill down to the lowest level on a sunburst chart, so that it becomes the center of the chart. Right now, when you click on the outer most level on the chart, that level will not move to the center. I'd like that outer most level to be able to become the center circle... the same way the higher levels do. Is there a simple way to accomplish this?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Allow drilling down to the deepest level on sunburst

Hi tylerm!

It seems, that I have already answered the same question on this topic: viewtopic.php?f=9&t=49118&p=178357&hili ... st#p178519

So I would like to clarify because I have seen also, that you want to disable breadcrumbs. If you want to have the deepest level as an inner circle you won't see its parent and you will lose the possibility to move to the upper level of the data, if you disable breadcrumbs you won't be able to move through sunburst nodes. Is that the behaviour you would like to achieve?

I am looking for your response.
Regards!
Hubert Kozik
Highcharts Developer
tylerm
Posts: 9
Joined: Wed Jul 20, 2022 9:07 pm

Re: Allow drilling down to the deepest level on sunburst

Hi Hubert, thanks for following up. You can always click on the center circle to navigate "up" the sunburst chart... so removing the breadcrumbs doesn't leave you stuck. For example, in this chart that you shared with me, you don't get stuck:

https://jsfiddle.net/BlackLabel/eoq1tbwz/

If you click on India, I want it to bring India right to the center, with no children around it (because it doesn't have any)... then if you click on India again (which is now the center circle) it would bring you back up one level... just like it does if you click on any other center circle at higher levels.

Does that make sense?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Allow drilling down to the deepest level on sunburst

Tyler,
Thank you for your explanation, now I understand it clearly. This feature is something, which is not implemented in Highcharts Core so that it can be added to your Highcharts chart config, exactly to click on series. Inside this callback function check if the point is in the last level and then use some custom properties to check if it's drilled down already or not. To make a drill down/drill up you can use this line:

Code: Select all

chart.series[0].setRootNode(drillId, true, {trigger: 'click'});
Please, check the demo below to see an example.
Demo: https://jsfiddle.net/BlackLabel/ebvgzu76/

Feel free to ask any further questions.
Regards!
Hubert Kozik
Highcharts Developer
tylerm
Posts: 9
Joined: Wed Jul 20, 2022 9:07 pm

Re: Allow drilling down to the deepest level on sunburst

This is fantastic. I had to make a small change because I have some children in higher levels that don't have any children below them (ie. not all children have children going down to the lowest level). You were checking if the user clicked on the lowest level, but I changed it to check to see if the level they clicked on had no children... ie. I changed it to this:

Code: Select all

if (point.node.children.length === 0)
Here's a working version with my change:

https://jsfiddle.net/n1w96r7j

Thanks again for the help.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Allow drilling down to the deepest level on sunburst

Tyler,
Yes, there can be some bugs, because it is a custom solution. Thank you for sharing the improved demo with other users!
In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”