1

I'm trying to display a default, empty chart when no data has been passed in. The configuration is provided by:

const getEmptyChartConfig = (componentProps: SelectedItemsChartProps) => ({
  xAxis: {
    min: 0,
    max: 5,
    allowDecimals: false,
  },
  yAxis: {
    min: 0,
    max: 30,
    allowDecimals: false,
  },
});

The component I am passing it into is:

export const ItemsChart: React.FC<ItemsChartProps> = withTheme<
  React.NamedExoticComponent<ItemsChartProps>
>(
  React.memo((props) => {
    const options = props.points.length
      ? {
          series: getAllSeries(props.points, props.items),
        }
      : getEmptyChartConfig(props);

    console.log('App options=' + JSON.stringify(options));

    return <HighchartsReact highcharts={Highcharts} options={options} />;
  }),
);

I am able to see the log line run with the updated options when props.points.length > 0. But the rendered chart is displaying axes with min/max of 0-5 for x-axis and 0-30 for y-axis. I can't see why this is the case since the updated options object doesn't contain this configuration anymore. Seems like HighCharts is cacheing the old configuration? Do I need to do something to force an update?

Cheers

Sol
  • 31
  • 3
  • 1
    From further investigation it seems like `xAxis` and `yAxis` members can't be updated. Anyone know why this is? – Sol May 12 '20 at 16:22
  • 1
    Welcome to Stack Exchange. Great to have you aboard, sir! – Armada May 12 '20 at 17:26
  • Hi @Sol, Could you reproduce the problem in some online code editor? You can start from: https://codesandbox.io/s/highcharts-react-demo-1jwog?file=/demo.jsx – ppotaczek May 13 '20 at 06:31
  • In the end I had to force an update on the axes configuration using a React `ref` and calling `chart.update()` with a x/y axes `min/max` values set to `null`. Seems like `HighCharts` doesn't like the axes/chart object configs to be updated. – Sol May 14 '20 at 16:02
  • The wrapper also uses `chart.update` to apply changes. Please reproduce the issue. – ppotaczek May 14 '20 at 20:32

0 Answers0