mkbhj
Posts: 48
Joined: Tue Jun 30, 2020 6:47 am

Sunburst Feature Needed

Hello,

I am using a highcharts in the angular 6 application.

I need the single click event for getting a value in point in the sunburst chart and drill down to node in a Dbl click event to customize.

This is feature is not available in Sunburst and treemap and geomap.

Please provide any option like that.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Sunburst Feature Needed

Hi mkbhj,

We appreciate you reaching out to us!

In Highcharts there is no implementation of double click events, but there is a way to inject some code to recognize if there was a single or double click. To implement this feature it is needed to extend function, which is responsible for events caching. You can find out more about extending functions here https://www.highcharts.com/docs/extendi ... highcharts. To make this you have to make a customPlugin.ts file where you need to use H.wrap function, which wraps function setRootNode from H.seriesTypes.treemap.prototype - this function is called when drilling event is fired. In this wrap you have to recognize type of click. There is a lot of approaches to achieve this, I made it with setTimeout method to check if user clicked second time in 500 ms after first click. Then in app.component.ts you have to initialize customPlugin. Then to implement getting a value from point when there is a single click you can add a function in point.events.click property with optional implementing a feature to prevent showing value a many times (when double click makes two single clicks events).

Demo: https://stackblitz.com/edit/highcharts- ... mponent.ts
Docs: https://www.highcharts.com/docs/extendi ... highcharts
https://github.com/highcharts/highchart ... d-a-module
API reference: https://api.highcharts.com/highcharts/s ... ents.click

Let me know if that was what you were looking for!
Best regards!
Hubert Kozik
Highcharts Developer
mkbhj
Posts: 48
Joined: Tue Jun 30, 2020 6:47 am

Re: Sunburst Feature Needed

Hello,


I already used the custom event in my project so I can easily use dblclick event in my project.

So please give an example for using custom event dblclick for drilldowntonode option and single click for value select.

I could try a custom plugin in my project it won't work. (instead of a custom plugin anything available please share).
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Sunburst Feature Needed

mkbhj,

Thanks for your response. Here is an example of feature you want to implement. Sunburst has its own drilldown and drillup methods, unfortunately, they are not documented yet. In the demo, I showed how to use them.

Demo: https://stackblitz.com/edit/highcharts- ... ine-hm4wse

Feel free to ask any further questions.
Regards!
Hubert Kozik
Highcharts Developer
mkbhj
Posts: 48
Joined: Tue Jun 30, 2020 6:47 am

Re: Sunburst Feature Needed

Hi,

It's work for me Thanks.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Sunburst Feature Needed

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer
mkbhj
Posts: 48
Joined: Tue Jun 30, 2020 6:47 am

Re: GeoMap Feature Needed

Hello,

I have shown in my application USA Detailed view geo-map using high maps.

I need a single click to select a state or county in the detailed geo map.

And I have used custom events in my application so I use dblclick to drill down from the state to the county.

This option I needed.

Please provide it As soon as possible.

Regards,

Manojkumar M
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Sunburst Feature Needed

Hi Manojkumar,

To be able to select states on your map you can use allowPointSelect property. To do drilldown to state as you want you can make dblclick event on series and then call a function responsible for drilldown. You can see an example in the demo below.

Demo: https://jsfiddle.net/BlackLabel/1m5bkLhq/85/
API Reference: https://api.highcharts.com/highmaps/plo ... ointSelect
https://api.highcharts.com/highmaps/ser ... tes.select
https://api.highcharts.com/highmaps/plo ... ies.events

Let me know if that was what you were looking for!
Regards!
Hubert Kozik
Highcharts Developer
mkbhj
Posts: 48
Joined: Tue Jun 30, 2020 6:47 am

Re:GeoMap Feature Needed

Hello,

Exactly I need this feature only.

But I need an angular 6 Project (can u give a TS example).



Regards,

Manojkumar M
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Sunburst Feature Needed

Manojkumar,

You can find a dblclick drilldown feature in Angular with TS in the demo below.

Demo: https://stackblitz.com/edit/highcharts- ... map-t92qvz

Regards!
Hubert Kozik
Highcharts Developer
mkbhj
Posts: 48
Joined: Tue Jun 30, 2020 6:47 am

Re: GeoMap Feature Needed

Hello,

When I single click on a map point that will be selected because of allowpointselect.

but how can I get the selected values?

And please give an example of select on click event and drill down on dblclick event.


Regards,

Manojkumar
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Sunburst Feature Needed

Manojkumar,
You can use select event, which is called on the selection of point and you have all information about the selected point, just like in the demo below (132nd line).

Demo: https://stackblitz.com/edit/highcharts- ... map-rqdkqn
API Reference: https://api.highcharts.com/highmaps/plo ... nts.select

Regards!
Hubert Kozik
Highcharts Developer
mkbhj
Posts: 48
Joined: Tue Jun 30, 2020 6:47 am

Re: GeoMap Feature Needed

Hello,

Yes I used that select function like below,

point: {
events: {
select: function () {
console.log(this.value);
},
},
}


But,

when I get some local variable value inside a select event it throws undefined.

Example:

I declare or inject some variables inside constructor (or) below the component class

example : chartData ='manoj';

then i have to access the chartdata variable in inside select event it throws undefined(inside select event i give in to console)
point: {
events: {
select: function () {
console.log(this.value, this.chartData);
},
},
}
mkbhj
Posts: 48
Joined: Tue Jun 30, 2020 6:47 am

Re: GeoMap Feature Needed

Hello,

Please Give a Solution For the above queries?


Regards,

Manojkumar M
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Sunburst Feature Needed

Manojkumar,

In plotOptions.series.point.events.select event this property refers to point and you don't have access to variables from class. You can declare a variable inside a class (28nd line), then assign it to series (145nd line) and now you have this variable in this.series.userOptions in select event.

Demo: https://stackblitz.com/edit/highcharts- ... map-5tthky

Let me know if you have any further questions!
Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”