title: Cannot get react-chartjs to update
body: <p>I am trying to follow the "Example usage" code from <a href="https://github.com/jhudson8/react-chartjs" rel="nofollow">react-chartjs github page</a></p>
  
  <p>I am new to javascript and react and probably just being naive. How can I get the new chartData from "_onChange" to update my PolarAreaChart? I tried something more direct by calling element.getDocumentById("polarChart"), but that returns nothing and then I cannot call .update on it... the whole "insert redraw in the xml" and it will magically call update seems magical to me :(</p>
  
  <p>PolarPlot.jsx</p>
  
  <pre><code>var React = require ('react');
  var PolarAreaChart = require ('react-chartjs').PolarArea;
  var FilterStore = require ('FilterStore')
  
  var PolarPlot = React.createClass ({
    componentWillMount: function () {
        FilterStore.addChangeListener  (this._onChange);
    },
  
    _onChange: function () {
      console.log("time to update")
  
      chartData = [
          {
              value: 300,
              color:"#F7464A",
              highlight: "#FF5A5E",
              label: "Red"
          }]
    },
  
    render: function () {
      return (
        &lt;PolarAreaChart id="polarChart" data={chartData} options={chartOptions} redraw/&gt;
      );
    }
  });
  
  var chartData = [
      {
          value: 300,
          color:"#F7464A",
          highlight: "#FF5A5E",
          label: "Red"
      },
      {
          value: 50,
          color: "#46BFBD",
          highlight: "#5AD3D1",
          label: "Green"
      },
      {
          value: 100,
          color: "#FDB45C",
          highlight: "#FFC870",
          label: "Yellow"
      },
      {
          value: 40,
          color: "#949FB1",
          highlight: "#A8B3C5",
          label: "Grey"
      },
      {
          value: 120,
          color: "#4D5360",
          highlight: "#616774",
          label: "Dark Grey"
      }
  
  ];
  
  var chartOptions = [
    {
        //Boolean - Show a backdrop to the scale label
        scaleShowLabelBackdrop : true,
  
        //String - The colour of the label backdrop
        scaleBackdropColor : "rgba(255,255,255,0.75)",
  
        // Boolean - Whether the scale should begin at zero
        scaleBeginAtZero : true,
  
        //Number - The backdrop padding above &amp; below the label in pixels
        scaleBackdropPaddingY : 2,
  
        //Number - The backdrop padding to the side of the label in pixels
        scaleBackdropPaddingX : 2,
  
        //Boolean - Show line for each value in the scale
        scaleShowLine : true,
  
        //Boolean - Stroke a line around each segment in the chart
        segmentShowStroke : true,
  
        //String - The colour of the stroke on each segement.
        segmentStrokeColor : "#fff",
  
        //Number - The width of the stroke value in pixels
        segmentStrokeWidth : 2,
  
        //Number - Amount of animation steps
        animationSteps : 100,
  
        //String - Animation easing effect.
        animationEasing : "easeOutBounce",
  
        //Boolean - Whether to animate the rotation of the chart
        animateRotate : true,
  
        //Boolean - Whether to animate scaling the chart from the centre
        animateScale : false,
  
        //String - A legend template
        legendTemplate : "&lt;ul class=\"&lt;%=name.toLowerCase()%&gt;-legend\"&gt;&lt;% for (var i=0; i&lt;segments.length; i++){%&gt;&lt;li&gt;&lt;span style=\"background-color:&lt;%=segments[i].fillColor%&gt;\"&gt;&lt;/span&gt;&lt;%if(segments[i].label){%&gt;&lt;%=segments[i].label%&gt;&lt;%}%&gt;&lt;/li&gt;&lt;%}%&gt;&lt;/ul&gt;"
  
    }
  
  ];
  
  module.exports = PolarPlot;
  </code></pre>