francesco.lilli
Posts: 5
Joined: Thu Nov 25, 2021 12:56 pm

Type checking for "PointClickEventObject"

Hi there,

I have a question on the nature of events being fired when clicking into an area of a Sunburst chart (but this may apply to many other types of charts).
I'm using Typescript in React, Highcharts version 9.2.2, Highcharts-React version 3.1.0.

Say I have this config for the chart:

Code: Select all

get chartConfig() {
        return {
            chart: {
                height: '60%',
            },
            ...
            series: [
                {
                    type: 'sunburst',
                    ...
                    point: {
                        events: {
                            click: this.onClickLevel,
                        },
                    },
                    ...
                }
            ]
       }
}

And this handler for click events (following this example https://jsfiddle.net/BlackLabel/zrt4m13g):

Code: Select all

@autobind
onClickLevel(e: PointClickEventObject) {
        const series = e.point.series;
        // "node" is not accepted but it's available
        const clickedLevel = e.point.node.level;
        // "levels" is not accepted but it's available
        const allLevels = series.userOptions.levels;
        ...
}

This works perfectly for me. However the IDE is complaining about type checking.

As explained in the comments e.point.series is being recognised, but e.point.node is not. Also e.point.series.userOptions is recognised but a subsequent .level isn't. This is all in line with the documentation for Point https://api.highcharts.com/class-refere ... arts.Point.

So I wonder whether:
1) I am right in assuming that the right type of "e" is "PointClickEventObject".
2) Certain paths, e.g. e.point.node.level, would only be available for specific charts.
3) There is a way to declare things properly in Typescript (instead of having to just ignore the warnings).
4) There are other cleaner ways to achieve this.

Thanks!
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Type checking for "PointClickEventObject"

Hi,

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

1. Yes, this is the best publicly available type for describing this event.
2. As you see in the attached API, there is no public 'node' property on the point and this is not depending on the specific chart or series, but which types will be available publicly. There is a chance that in the core code in the specific series such types will be available and will not throw out errors.

3.

Code: Select all

interface ExtendedXXX extends XXX {
    someProperty: number;
}
And this is what I recommend if you use TS.

4. There is also a possibility of using cast to any, but this is not the cleanest way- for example (e.point as any).node.level

Let me know if you have any further questions,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
francesco.lilli
Posts: 5
Joined: Thu Nov 25, 2021 12:56 pm

Re: Type checking for "PointClickEventObject"

Hi, thanks for this! I'm assuming you wouldn't be able to point me to the actual type of that "node" then?

Code: Select all

interface ExtendedPoint extends Point {
    node: Node; // ???
}

interface ExtendedPointClickEventObject extends PointClickEventObject {
    point: ExtendedPoint;
}

I suppose I can just declare it myself, but would still see if you have any feedback. Thanks!
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Type checking for "PointClickEventObject"

Hi,

I am not able to tell you the type of this node, but the following demo should help with implementation of your chart:

Demo:
https://stackblitz.com/edit/highcharts- ... ine-7jq66s

Feel free to ask any further questions,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Usage”