react-highcharts

react-highcharts copied to clipboard

I'd like to create an SVG after the HighChart is rendered by using the callback method.

The issue I'm running into is that the callback method seems to be happening after render but before the reference is defined.

I'm having problems with sharing a JSBin, but pasting this in will reproduce the issue:

var Hello = React.createClass({
  render: function (){
    return (
      <h1>Hello {this.props.name}!</h1>
    );
  }
});

var config = {
  title: {
    text: 'Hello, World!'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
};

var MyChart = React.createClass({

  showReference: function(){
   alert(JSON.stringify(this.refs))
  },

  render: function() {
    return <ReactHighcharts config = {config} ref="hello" callback={this.showReference}/>;
  }
});

ReactDOM.render(
  <MyChart/>,
  document.getElementById('container')
);

This might be unnecessary, but what happens if you do:

callback={this.showReference.bind(this)}