Highchart drill up function now working in reactjs

Question

I'm using highchart large tree map demo. I'm getting level data on click of each section. But also need to get the data on back button. So I'm using events drill up function to get data on click of back button. below is my code.

  this.setState({
        data: {
            series: [{
                type: 'treemap',
                layoutAlgorithm: 'squarified',
                allowDrillToNode: true,
                animationLimit: 1000,
                dataLabels: {
                    enabled: false
                },
                levelIsConstant: false,
                levels: [{
                    level: 1,
                    dataLabels: {
                        enabled: true
                    },
                    borderWidth: 0,

                }],
                data: points,
                events: {
                    click:(e)=>{
                        console.log(e)
                    },
                    drillup:(e)=>{
                        console.log(e)
                    }
                }
            }],
            // subtitle: {
            //     text: 'Click points to drill down. Source: <a href="http://apps.who.int/gho/data/node.main.12?lang=en">WHO</a>.'
            // },
            title: {
                text: ''
            }
        }
    })

But don't know drill up is not working even click is working and also I added

import drilldown from "highcharts/modules/drilldown";
drilldown(Highcharts);

But still not getting any data. Please help.

score 0 · Answer 1 · answered Dec 18 '19 at 18:03

Notice that treemap series don't use the drilldown module, but has own drilldown implementation, which logic you can find here: https://code.highcharts.com/modules/treemap.src.js

What you will need to do is render a custom button while clicking the point and attach an update functionality on this button. Something like here:

Demo: https://jsfiddle.net/BlackLabel/gas07t34/

events: {
  click() {
    let chart = this.chart;

    chart.button = chart.renderer.button('back', 500, 0, function() {

      chart.series[0].update({
        data: data1
      })
      chart.button.destroy();
    }).add()

    this.update({
      data: data2
    })
  }
}

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button

API: https://api.highcharts.com/class-reference/Highcharts.Series#update

Highchart drill up function now working in reactjs

1 Answers1