I'm using apexcharts and react to model a live updating price chart. As part of this chart, I would like to update the minimum and maximum bounds as new data from the series is rendered.

My thoughts are that I can define state for min and max bounds,

  let [min, setMin] = useState(9999)
  let [max, setMax] = useState(0)

set the state inside apexcharts updated event option (which fires when the chart has been dynamically updated either with updateOptions() or updateSeries() functions) when the latest price from the series is above or below the current min/max.

  const options = {
      events: {
        updated: function(chartContext, config) {
          console.log(`update called! \n chartContext: ${chartContext.data.twoDSeries}`)
          let yaxis = config.config.yaxis[0]
          let latestPrice = chartContext.data.twoDSeries[chartContext.data.twoDSeries.length - 1]
          if(yaxis.min > latestPrice){
            setMin(latestPrice)
          }
          if(yaxis.max < latestPrice) {
            setMax(latestPrice)
          }
        }
      }
    },

and then plug in the min/max values into the yaxis option and return the chart

    yaxis: {
      title: { text: "Live updating chart" },
      labels: {
        formatter: val => val.toFixed(1)
      },
      min: min,
      max: max
    }
  };
  return <Chart type="candlestick" options={options} series={props.dataList} width = "1200" height = "600" />;
};

However this doesn't work very well and the updated state is not reliably getting passed to the y-axis. Is there a better way to do this? Thanks!