React Highcharts - how to use drillUp from parent component? - reactjs

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