codenamezero
Posts: 22
Joined: Thu Dec 19, 2019 7:23 pm

[React] How to setVisibile on Series? Nothing happens

I've been trying to look for various posts but none of them have any explanation nor solution.
One that came close to my exact same problem never had a reply and the linked thread is gone:
viewtopic.php?f=14&t=39751

Environment: React latest
Highcharts: Latest

Currently I'm using Highcharts directly and not with the Highcharts React Wrapper.

I'm creating the chart like this:

Code: Select all

...
// where in the options, I set renderTo with an unique id
ref.current.chart = Highcharts.chart(container, options);
...
// then i just tell Highcharts to render to that container
return (<StyledChartContainer id={props.id} tabIndex={0} ref={onRefUpdated} />);

In the code, I access the chart object returned by Highcharts directly and tried to show/hide the series.

Code: Select all

const chart = ref.current.chart;
chart.series[0].setVisible(true);
// chart.series[0].setVisible(true, true);
But nothing ever happen. Weird thing is that, if i dump the ref directly in window, and the I try to play with it directly, is fine, but not from the code...

Code: Select all

> window['example-donut-chart'].current.chart.series[0].setVisible(true)
Is there anything I should be aware of when dealing with Highcarts under React? Is there an official demo showcasing toggling of a series with or without using the React wrapper?
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: [React] How to setVisibile on Series? Nothing happens

Hello,

What is the reason you don't want to use the official wrapper?

Could you reproduce the issue in an online editor that I could work on? For example CodeSandbox. It would make it easier for me to help you.

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
codenamezero
Posts: 22
Joined: Thu Dec 19, 2019 7:23 pm

Re: [React] How to setVisibile on Series? Nothing happens

michal.f wrote: Thu Jan 27, 2022 4:18 pm What is the reason you don't want to use the official wrapper?
I was not able to get the ref from the wrapper. There are things that we wish to do with Highcharts where we want to toggle multiple charts' series visible on and off with our own React component through Highcharts' chart API. To do that, we try to grab and pass the Chart object to our component.

Using the official wrapper, it returns a ref, yes, but by the time our React component tries to interact with the Chart object, the object itself is empty. Likely caused by a re-render. We tried to pass a ref callback function to it but in the end, it always ended up with the same issue... object become empty.

I tried to look for some official React Highcharts wrapper on how they use and interact Highcharts with the ref, but could not find any.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: [React] How to setVisibile on Series? Nothing happens

Hi,

The problem when using the wrapper is probably due to the fact that some unnecessary render is performed, but without a demo with recreating the problem, it is difficult to say.

Without using a wrapper, you can achieve it as in the demo below.

Demo: https://codesandbox.io/s/highcharts-react-demo-t9ksm

Let me know if that was what you were looking for!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”