sheshankangokar
Posts: 1
Joined: Fri Dec 03, 2021 6:12 am

Unable to add drillup event to Highcharts Sunburst chart. ReactJS

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
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Unable to add drillup event to Highcharts Sunburst chart. ReactJS

Hello sheshankangokar,

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

Please reproduce your issue in a form of a live demo. You can start here: https://stackblitz.com/edit/react-wpmvqx?file=index.js
Part of your config is already there, please insert your sample data and click event.

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”