react-highcharts how to call reflow?

Question

I use kirjs/react-highcharts plugin for react but I have no idea how to get Highchart component in order to call reflow like: $('#container1').highcharts().reflow()

From docs its tells:

For access to methods & properties from the Highcharts library you can use ReactHighcharts.Highcharts. For example, the Highcharts options are available via ReactHighcharts.Highcharts.getOptions().

but I don't see there any reflow() method.

Any ideas?

Edit

its located under ReactHighcharts.Highcharts.charts so I can call

ReactHighcharts.Highcharts.charts[0].reflow()

but it has list of all highchart instances so I have no information what index is mine

You could use Highcharts with React without that plugin as shown in this official Highcharts article: http://www.highcharts.com/blog/192-use-highcharts-to-create-charts-in-react For the plugin you are using - text in documentation, right after the one you posted is about `chart.series[0].addPoint(...` and `chart.reflow()` should be used in a similar way. — Kacper Madej, May 12 '16 at 16:00

Chee Conroy · Answer 1 · 2020-10-01T03:46:52.250

I am using highcharts-react-official and highcharts. They are available via npm . Although I am using different packages, the working principle should be the same.

The way of using reflow() function in react-highchart is also Highcharts.charts[i].reflow(). I have prepared 2 code sandboxes for the demonstration. The first code sandbox shows the way of re-flowing every chart, and the second code sandbox shows the way of re-flowing a particular chart.

The first code sandbox link is here.

There is a button on App.js to hide and show highchart divs.
The child component is React.memo (for performance optimization), therefore the hidden highchart will not be auto resized after it becomes visible.
To let every chart window resize with respect to the window size. The following code is placed in App.js. It looks for all existing charts and re-flow them:

    for (var i = 0; i < Highcharts.charts.length; i++) {
      if (Highcharts.charts[i] !== undefined) {
        Highcharts.charts[i].reflow();
      }
    }

The second code sandbox link is here.

Almost the same as the first code sandbox, but there is a ref array of referencing every chart.
The chart which needs re-flowing is placed with an id in its chart option.
Iterate every chart and get the index of the chart with that id e.g. "secondChart" for this example.

    for (var i = 0; i < chartRef.current.length; i++) {
      if (
        chartRef.current[i].chart.userOptions.id !== undefined &&
        chartRef.current[i].chart.userOptions.id === "secondChart"
      )
        Highcharts.charts[chartRef.current[i].chart.index].reflow();
    }

Re-flow that chart.

score 2 · Answer 2 · answered Mar 12 '21 at 10:57

The Reflow can be set with event load in options.

Workaround: You have to set reflow() using setTimeout() this will trigger the resizing. Time is set to 0 to avoid delay.

Solution

const options = {
    chart: {
      type: 'column',
      style: {},
      events: {
        load() {
          setTimeout(this.reflow.bind(this), 0);
        },
      },
    },
    title: 'Column Chart',
  }

Usage

<HighchartsReact highcharts={Highcharts} options={options} />

react-highcharts how to call reflow?

2 Answers2