My Scenario:

I am getting min and max value from parent component and I am passing the same in min and max in XAxis in child component which is responsible for showing plot.

Issue:

=> When the first time components mount - chartOptions is initialized in which series data is empty (As maindata is empty). Now, useEffect runs and calls an API which will getting data and I am passing that data into highcharts using ref method like this.....

useEffect(() => {
    const chart = chartRef.current.chart;
    if (chart) {
       chart.series[0].setData(mainData, true, true, false);
    }
}, [data]);

Now, when user clicks on refresh icon - I will fetch data again I can update series data by using above method. But, In order to set min and max in XAxis- I have to do this way (I need to set it again cause I want to range selector to be placed on same range):

useEffect(() => {
   setChartOptions((prevState) => ({
        ...prevState,
        xAxis: [
          {
            ...prevState.xAxis[0],
            min: xMax.maxX - 50,
            max: xMax.maxX,
          },
        ],
}));
}, [data]);

Steps to reproduce issue:

=> First time plot is not coming as data was empty, Than data comes from API and this will be set using ref, So now data is not null and we can see plot.

Than, setChartOptions will run and it will only change min and max and keep other things same as before, So again data will be null as it was null by default (mainData was null first time).

So, Plot is gone and can see just blank white screen.

Expectation:

=> I think, we can solve this problem like this:

Anyhow, we can set a mechanism to run setChartOptions first, so min and max is set and than and than only, We will update data using ref (chart.series[0].setData(mainData, true, true, false); ):

Till far what I have tried:

=> In simple terms, we can set Series data directly by set method like this:

setChartOptions((prevState) => ({
  ...prevState,
  series: [
    {
      ...prevState.series[0],
      data: mainData, // Update with the fetched data
    },
  ],
  xAxis: [
    {
      ...prevState.xAxis[0],
      min: xMax.maxX - 50,
      max: xMax.maxX,
    },
  ],
}));

But, This is not a working case in Scatter chart (Highcharts BUG)

But, I am not able to figured out how can i solve this with ReactJS.

Actually, I can't create a demo code as data is coming from API, but you can take this code as a reference in which I am updating data using ref:

https://stackblitz.com/edit/react-9wsnd9?file=index.js

======================================================

Update:

Hey, Thanks for your quick reply, But still I am not able to solve my problem:

Here is the code: https://stackblitz.com/edit/react-sgkrzf?file=index.js

Explanation: From parent - I am passing min={20} and max={40} to the child component.

Expected Behaviour: Min and Max should apply by default (Both together), but both are not working together (If min apply than max ain't and if max than min ignored)

I want initially to apply min and max 20 and 40 respectively, than user can change range selector and on refresh, that changed value should be preserved.

I.e.=> Changing range selector (20,40) to (34,75) should be preserved to (34,75) after refreshing data (I mean to say calling API)

How to do this? Please modify above code and help me with the same.

Thanks in advance.

Solution

You can use setChartOptions without prev state (the old options will not be removed).

useEffect(() => {
  setChartOptions(() => ({
    xAxis: [
      {
        min: xMax.maxX - 50,
        max: xMax.maxX
      }
    ]
  }));
}, [data]);

Docs: https://github.com/highcharts/highcharts-react#optimal-way-to-update

Or operate directly on the chart (similar to setData) and set xAxis extremes or update min/max.

API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes