Animation

[ogreen111]

It appears that the initial animation only works for line plots. I have tried column and pie with no success.

Using the demo at http://kirjs.github.io/react-highcharts/index.html

I added the below properties to the config object and get a bar chart but no animation.

 chart:{
    type: "column"
  },
  plotOptions: {
    series: {
      animation: {
        duration: 2000
      }
    }
  },

[ogreen111]

I added neverReflow={true} and the animation works. Not exactly sure why that has to be added to the column and pie charts and not the line.

[kirjs]

This is weird indeed, can you provide examples?

[amit1911]

same here. adding neverReflow={true} works

[acasaccia]

I confirm this is an issue. This is trivial to reproduce but not easy to setup online. Setting neverReflow={true} is not acceptable as a workaround as I need reflows to animate when the configuration change. Any thoughts on what might be causing this?

[rmemoria]

+1

[hally9k]

+1

[rcarek]

For some reason, the animation is suppressed due to the call to reflow in the renderChart function of the chartsFactory.jsx file. The reason it works if you set neverReflow={true} is because this never executes.

if (!this.props.neverReflow) {
        win.requestAnimationFrame && requestAnimationFrame(()=>{
          this.chart && this.chart.options && this.chart.reflow();
        });
      }

If you comment out only the && this.chart.reflow(), it works just fine.

Prior to submitting a pull that simply removes this, it would be good to understand the intent here. `

[JakeHP]

+1

[charliehavak]

+1

[charliehavak]

Currently I overcame this with the following hack:

class Chart extends React.Component {

	componentDidUpdate() {
		let chart = this.refs.chart.getChart();
		chart.reflow = () => {};
	}

	render() {
		return (
			<HighchartsReact config={this.props.config} ref="chart"/>
		);
	}
}

[jordancardwell]

Thanks @charliehavak .. that was a nice workaround.. I realized that I still need reflow though for page resizing.. I added this and it seems to allow me to have both animations and reflow

  componentDidUpdate() {
    const chart = this.refs.chart ? this.refs.chart.getChart() : {}
    const chartReflow = chart.reflow
    chart.reflow = () => {}
    setTimeout(() => (chart.reflow = chartReflow))
  }

[jordancardwell]

Just realized that my solution had a flaw with somewhat of a race condition.. here is the slightly better (but no less hacky) solution

  import Highcharts from 'highcharts'
  let chartReflow = undefined;
...
  componentDidUpdate() {
    const chart = this.refs.chart ? this.refs.chart.getChart() : {}
    chartReflow = chartReflow || chart.reflow
    chart.reflow = () => {}
    setTimeout(() => (chart.reflow = chartReflow))
  }

my first solution didn't work for one of my charts.. componentDidUpdate seemed to be getting triggered before the timeout completed, so i then saved the reference to the empty chartReflow that we had just set an instant before..

this workaround makes sure to only ever save a reference to the legitimate reflow function ( @charliehavak ☝️ )

[erikfrisk]

Thanks for the workaround @jordancardwell.

Is anyone working on a real fix for this?

@kirjs: Do you know the answer to @rcarek's question from november? Would love to avoid the hack if I can.

[kirjs]

@erikfrisk I will have some time to look into that in a couple of weeks. Meanwhile PRs welcome.

[erikfrisk]

Awesome! Thanks @kirjs. I'll submit a PR if I can but I'm brand new to both react and highcharts 😄

[adziashvili]

@kirjs did you get around issuing a fix? Otherwise @jordancardwell should I use your workaround?

[jordancardwell]

@adziashvili I'm still using the workaround in a production app.. works well enough :)

[Paden]

Thanks for the workaround @jordancardwell! +1 for fix

[kellyrmilligan]

wow, this is still open?

[kellyrmilligan]

I have implemented the workaround, and the initial animation is still not triggering for me :(

[kellyrmilligan]

neverReflow is working for now. did you also have something that was triggering componentDidUpdate?

@jordancardwell

[ilyjs]

Hi @kellyrmilligan , We will make a lot of changes in the 17th release. We plan to fix the bug with the animation. Make an example https://stackblitz.com/ .

[jordancardwell]

@kellyrmilligan we passed the data for the chart in as a prop of the component that wraps and renders the <ReactHighcharts ... /> component... so, in our case, whenever props.data changes, it re-renders and componentDidUpdate will get called after the render.

...possibly relevant to what you're doing: we also used the isPureConfig prop on the <ReactHighcharts ... /> component, so whenever a new config object is passed in it will re-render the chart.

[deshario]

@jordancardwell It really works .... but maybe sometime it may this.refs is deprecated in react newer version ... so i implement ref like this

constructor(props) {
       super(props);
       this.chartRef = React.createRef();
   }

componentDidUpdate() {
	const chart = this.chartRef.current ? this.chartRef.current.getChart() : {}
       chartReflow = chartReflow || chart.reflow
       chart.reflow = () => {}
       setTimeout(() => (chart.reflow = chartReflow))
   }

<ReactHighcharts config={this.generateChartConfig(chartConfig)} ref={this.chartRef}></ReactHighcharts>