A question about Reflow()

[Roberthaf]

Hey!
First of, awesome work I really enjoy using your library its been working like a charm!

I am a rather new react user and I wanted to ask how you would handle using highcharts .reflow().
I have a highchart that is hidden under a tab with Display: none.
And when its initially rendered it has no height and width properties, so the chart will get some default value w:777 h:400 f.x.
So I would need to trigger a reflow() after the chart has been renderd. resizing the
page also works to solve this.
I was wondering if you could give some advice how to do that or if there is a super easy way i'm missing?

Thanks in advance and good work!

Just for clarity here is what my container is doing. I'm just passing some props to my highchart component.

            <Tab eventKey={5} title="Throughput">
              Throughput Chart
              <ThroughputChart
                title={data.tank}
                dataPoints={data.throughputChart}
                channelNames={data.channelName}
              />

And my stateless component is just a basic setup

const ThroughputChart = props => (
  <div>
    <HighchartsChart>
      <Chart zoomType='x'/>
      <Legend layout="horizontal" align="center" verticalAlign="bottom" />

      <Title>{props.title}</Title>
      <XAxis id="datetime_troughputchart" type="datetime">
...etc

[whawker]

Hi, thanks! Glad you're happy with the library.

Interesting, I should add proper support for reflow. In the meantime I would suggest creating a custom component with the provideChart HOC.

import React, { Component } from 'react';
import Highcharts from 'highcharts';
import { Hidden, provideChart } from 'react-jsx-highcharts';

class Reflow extends Component {
  componentDidMount () {
    const chart = this.props.getChart();
    Highcharts.addEvent(chart, 'load', chart.reflow);
  }

  render () {
    return (
      <Hidden />
    );
  }
}

export default provideChart(Reflow);

Then insert that Reflow component as a child of your HighchartsChart component.

I can't check for certain if my example above works, as I'm on holiday at the moment, so don't have my laptop (only have my phone).

Let me know how you get on.

[Roberthaf]

Okey that is interesting.

I will do a test and let you know what I find out!
Thanks for the help.

[Roberthaf]

Just an update on the Reflow component.
I did not get the .reflow working. I was not getting any error or nothing it was just not working.
I'm guessing the "problem" is somewhere else.

Just for fun and if someone else has this problem.
I did a simple work around. this.handleSelect saves the activeKey to the state and when the this.state.key matches the tab number, I render the charts. Works like a charm.

  handleSelect(key) {
    this.setState({ key });
  }
 <Tabs activeKey={this.state.key} onSelect={this.handleSelect} id="counterInfo" > 
          ...
        <Tab eventKey={4} title="Spread">
        {this.state.key===4 ? (
          <LineChart
          title={data.tank}
          dataPoints={data.levelChart}
          plotLines={data.multie}
          reggressionLines={data.endPointRegression}
        />
        ) : ( <div>No data</div> ) }
        </Tab>

Everything is working fine now so I'm going to abandon the .reflow :)

[whawker]

Hi @Roberthaf I've pushed some changes (not yet released) that allow for reflow by providing a function to a new callback prop. See example here.

The idea is that the function you pass to the callback prop, will be called with the Highcharts chart object when the chart is created. That way you can call reflow on demand. It's not very "Reacty" but it seems to be the simplest implementation. What are your thoughts?

[whawker]

I had to publish in the end, to fix a different issue. Reflow support is included in 2.0.3. Still be interested in hearing your thoughts though.

[Roberthaf]

Hi,
It looks really good.
I tried it out on one of my components and it works.
Its very good to be able to access the Highcharts chart object using the callback.
This might come in handy with doing various other HC stuff as well :)

Very nice work!

[whawker]

Great stuff! Thanks!

[abelkbil]

@whawker reflow example is great. Will this library work with typescript. on parent div resize. Thank you.

[whawker]

I have never used Typescript, so couldn't say if it works or not. I don't plan on adding any Typescript support at this time, would welcome a pull request though!

[LionyxML]

Hello there @whawker!

Sorry to wake this thread from its deepest sleep, but searching for reflow dropped me here =D

May you update this example so it may work with functional components?

I kind of managed a workaround, but I am not sure this is the proper way.

Typescript:

import type * as HighchartsTypes from "highcharts";
...
const [exposedChart, setExposedChart] = useState<HighchartsTypes.Chart>();
...
const getChart = (chart: HighchartsTypes.Chart): void =>
  setExposedChart(chart);

const handleReflowChart = (): void => {
  if (typeof exposedChart !== "undefined") exposedChart.reflow();
};
...
<HighchartsChart callback={getChart}>
...