React Highcharts - how to use drillUp from parent component?

Question

I am trying to drillUp from the parent component

This is the father component:

<button onClick={() => {
drillUp();
}}></button>
<TreeMap dataLabel={dataLabel} height={blockHeight} />

And in the child component I am rendering the Highchart

<ReactHighcharts
   highcharts={Highcharts}
   options={treeConfig}
></ReactHighcharts>

This is my treeConfig

  const treeConfig = {
    chart: {
      height: height,
      events: {
        render() {
          const elements = document.getElementsByClassName(
            "highcharts-point highcharts-color-0 highcharts-internal-node-interactive",
          );
          const drillButton = document.getElementsByClassName(
            "highcharts-drillup-button",
          )[0];
          if (drillButton && drillButton.id !== "drill") {
            drillButton.setAttribute("id", "drill");
          }
          if (elements.length) {
            const sortElements = [...elements].sort((a, b) => {
              return a.width.baseVal.value * a.height.baseVal.value >
                b.width.baseVal.value * b.height.baseVal.value
                ? -1
                : 1;
            });
            sortElements.forEach((el, i) => {
              el.style.setProperty("fill", colorPallete[i], "important");
              el.setAttribute("fill", colorPallete[i]);
            });
          }
        }
      },
    },

I found this post -> Manually Triggering drillup event, highcharts but it's in jQuery and I tried that and it didn't work

How can I cause drillUp event from the parent component in React?

Thanks in advance!

Answer 1

Ok, this was more complicated than I thought because the documentation is dreadful but I was able to get it running on this stackblitz

To be able to call events manually or programmatically on the chart we need to get the reference to the chart object. To get the ref on the child component we can do something like this:

const Child = ({ setChart }) => {
  ... 
  
  const chartComponent = useRef(null);

  useEffect(() => {
    setChart(chartComponent.current.chart);
  }, []);

  highchartsDrillDown(Highcharts);

  return (
    <HighchartsReact
      highcharts={Highcharts}
      options={options}
      ref={chartComponent}
    />
  );
}

setChart is a prop from the parent that sets the chart object on the parent

On the parent you can manually call drilldown and drillup like this:

  const Parent = () => {
  const [chart, setChart] = useState(null);

  const handleDrillUp = () => {
    chart.drillUp();
  };

  const handleDrillDown = () => {
    chart.series[0].data[0].doDrilldown(); // you can chose the series and data
  };

  return (
    <div>
      <button onClick={handleDrillUp}> drill up</button>
      <button onClick={handleDrillDown}> drill down</button>
      <Child setChart={setChart} />;
    </div>
  );
};

EDIT: The previous solution is for the highcharts-react-official lib.

Just noticed you are using a different lib for highcharts than the one I used, so for react-highcharts the only difference would be:

const afterRender = (chart) => {setChart(chart)};

<ReactHighcharts config = {config} callback = {afterRender}>. 
</ReactHighcharts>

the only difference is that one uses the useRef hook and the other has a callback prop