Hi,
I am not able to fire an event on click of back button on the sunburst chart. I'm using Highcharts on ReactJs.
Following is my code.
import React, { PureComponent, memo } from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import sunburst from "highcharts/modules/sunburst";
import { connect } from "react-redux";
sunburst(Highcharts);
class HighCharts extends PureComponent {
state = {
title: this.props.title,
chartData: this.props.chartData,
chartRef: React.createRef(),
};
render() {
let _this = this;
const sunburst = {
credits: {
enabled: false
},
title: {
text: this.state.title,
},
chart: {
events : {
drillup : function(event){
console.log("Drill up clicked")
}
},
height: "100%",
animation: false,
},
series: [
{
type: "sunburst",
data: this.state.chartData,
allowDrillToNode: true,
cursor: "pointer",
dataLabels: {
format: "{point.name}",
filter: {
property: "innerArcLength",
operator: ">",
value: 10,
},
style:{
fontSize: "12px"
}
},
levels: [
{
level: 1,
levelIsConstant: false,
dataLabels: {
filter: {
property: "outerArcLength",
operator: ">",
value: 54,
},
style:{
fontSize: "16px"
}
},
},
{
level: 2,
colorByPoint: true,
},
],
point: {
events: {
click: function(oEvent) {
_this.props.onSelect(oEvent);
},
},
},
plotOptions: {
sunburst: {
size:100
}
}
},
],
};
return (
<div >
<HighchartsReact
options={sunburst}
highCharts={HighCharts}
ref={this.state.chartRef}
/>
</div>
);
}
}
export default connect()(HighCharts);
Thanks in advance