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!