title: Is it possible update Highchart data automatically and make animated effect?
body: <p>I'm using Highchart inside React application. I want to make animated effect for Highcart. </p>
  
  <p>For instance, it's to show the progress of uploading other data. I pass the progress via <code>this.props.progress</code>. However, I cannot pass props to data property in Highchart. </p>
  
  <p>Is it possible to make an animated effect with updating data? What could be the best practice?</p>
  
  <p>Highchart.js</p>
  
  <pre><code>class Highchart extends React.Component {
  static propTypes = {
  data: React.PropTypes.array,
  text: React.PropTypes.string,
  colors: React.PropTypes.array,
  size: React.PropTypes.any,
  bgcolor: React.PropTypes.string,
  width: React.PropTypes.number
  }
  
  constructor (props) {
  super(props)
  
  this.state = {
    uuid: uuid()
  }
  }
  
  componentDidMount () {
  Highcharts.chart(this.state.uuid, {
    chart: {
      renderTo: 'container',
      type: 'pie',
      width: this.props.width,
      backgroundColor: this.props.bgcolor
    },
    title: {
      text: this.props.text,
      useHTML: true,
      verticalAlign: 'middle',
      floating: true
    },
    plotOptions: {
      pie: {
        shadow: false,
        allowPointSelect: false,
        size: '100%',
        dataLabels: { enabled: false }
      },
      series: {
        states: {
          hover: {
            enabled: false
          }
        }
      }
    },
    tooltip: { enabled: false },
    credits: { enabled: false },
    colors:this.props.colors,
    series: [{
      data: this.props.data,
      size: this.props.size,
      innerSize: '90%',
      showInLegend:false,
      dataLabels: {
        enabled: false
      }
    }]
  })
  }
  render () {
  return (
    &lt;div id={this.state.uuid} className='high-chart' /&gt;
  )
  }
  }
  
  export default Highchart
  </code></pre>
  
  <p>ProgressMeter.js</p>
  
  <pre><code>import React from 'react'
  import Highchart from 'components/Highchart'
  
  class ProgressMeter extends React.Component {
  static propTypes = {
  progress: React.PropTypes.number,
   }
  
  render () {
  return (
    &lt;div
      className='signup-percents-meter'
    &gt;
     &lt;DonutChart data={[this.props.progress, 100-this.props.progress]}
     //this code does not work.
        colors={['#ee382a', '#eaeaea']}
        /&gt;
    &lt;/div&gt;
    )
    }
    }
  
    export default ProgressMeter
  </code></pre>