use on click for pie react-highcharts without overriding default onclick function

Question

I have a pie chart from react-highcharts. I am currently attemping to implement the drilldown function.

Drilldown works if I remove my function, so I suspect my function is overriding the default onclick for react-highcharts.

The following code is within a component in react

createPieChartData()
{
    var data = []
    var steps_array = this.steps

    var step
    for (step of steps_array)
    {
        let obj = {}
        obj.name = step.position + " " + step.short_name
        obj.y = parseInt(step.duration)
        obj.drilldown = (parseInt(step.position)-1).toString()
        data.push(obj)
    }

    let series = []
    let action
    let index = 0
    for(action of this.actions)
    {
        let obj = {}
        obj.name = "Step " + index + " Actions"
        obj.id = index.toString()

        obj.data = action.map(element => {
            return [element.action_name, (1/action.length)]
        })

        series.push(obj)
        index+=1
    }

    const config = {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie',
            height: 750
        },
        title: {
            text: 'Duration Breakdown'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                events: {
                    click: this.showdetailsClick.bind(this)
                },
                series: {
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}: {point.y:.1f}%'
                    }
                }
            },
        },
        series: [{
            name: 'Time',
            colorByPoint: true,
            data: data
        }],
        drilldown: {
            series: series
        }
    };

 createPieChart()
{
    return <ReactHighcharts  config = {this.createPieChartData()}></ReactHighcharts>
}

 render() {
    return (
        <div>

            <h1> Time Distribution </h1>
            <br />
            <br />
                {this.createPieChart()}
            <br/>

            {
                this.state.showdetails?
                <p> <p>{this.displayStepDetails(this.state.step_num)}</p> <br/> <h4>Actions</h4> {this.createTable(this.actions, this.state.step_num)} </p>
                :
                <div></div>
            }
            <br/>
            <br />
            <br />
                {this.createTimeSeries()}
            <br/>
                {}
        </div>           
    );
}
}

The line of interest is events: {click: this.showdetailsClick}, which is within the config variable in plotOptions

it triggers this function in my component

showdetailsClick (event) {

    console.log(event)
    if (this.state.showdetails == false)
  {
    this.setState({
    showdetails: true,
    step_num: event.point.index,
    })
  }
  else
  {
    if (event.point.index != this.state.step_num){
        this.setState({
            step_num: event.point.index,
            })
    }

    else {
        this.setState({
        showdetails: false,
        })
    }

   }
}

If I comment out this function, the drilldown works as intended, otherwise my function is called and works as expected but the drilldown does not occur on click

Answer 1

Have you tried attaching your function to the drilldown event?

Since 3.0.8 Fires when a drilldown point is clicked, before the new series is added. This event is also utilized for async drilldown, where the seriesOptions are not added by option, but rather loaded async. Note that when clicking a category label to trigger multiple series drilldown, one drilldown event is triggered per point in the category.

https://api.highcharts.com/highcharts/chart.events.drilldown