title: Cannot get react-chartjs options to take effect
body: <p>I am stumped... the "chart data" works, but not the "chart options". Do I have to use .setState on my component for the options? </p>
  
  <p>I also did not see any complete exemplars by googling (correct me if I am wrong). I think I am just have trouble figuring out the "React" way of doing things... it has to be simple. My code is below. Sorry about how verbose it is.</p>
  
  <pre><code>  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;"
  
    }
  
  ];
  
  var chartOptionsRadarInit = [
    {
        //Boolean - Whether to show lines for each scale point
        scaleShowLine : true,
  
        //Boolean - Whether we show the angle lines out of the radar
        angleShowLineOut : true,
  
        //Boolean - Whether to show labels on the scale
        scaleShowLabels : false,
  
        // Boolean - Whether the scale should begin at zero
        scaleBeginAtZero : true,
  
        //String - Colour of the scale line
          scaleLineColor : "rgba(0,0,255,1)",
  
        //String - Colour of the angle line
        angleLineColor : "rgba(255,0,0,1)",
  
        //Number - Pixel width of the angle line
        angleLineWidth : 1,
  
        //String - Point label font declaration
        pointLabelFontFamily : "'Arial'",
  
        //String - Point label font weight
        pointLabelFontStyle : "normal",
  
        //Number - Point label font size in pixels
        pointLabelFontSize : 10,
  
        //String - Point label font colour
        pointLabelFontColor : "#666",
  
        //Boolean - Whether to show a dot for each point
        pointDot : true,
  
        //Number - Radius of each point dot in pixels
        pointDotRadius : 3,
  
        //Number - Pixel width of point dot stroke
        pointDotStrokeWidth : 1,
  
        //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
        pointHitDetectionRadius : 20,
  
        //Boolean - Whether to show a stroke for datasets
        datasetStroke : true,
  
        //Number - Pixel width of dataset stroke
        datasetStrokeWidth : 2,
  
        //Boolean - Whether to fill the dataset with a colour
        datasetFill : true,
  
        //String - A legend template
        legendTemplate : "&lt;ul class=\"&lt;%=name.toLowerCase()%&gt;-legend\"&gt;&lt;% for (var i=0; i&lt;datasets.length; i++){%&gt;&lt;li&gt;&lt;span style=\"background-color:&lt;%=datasets[i].strokeColor%&gt;\"&gt;&lt;/span&gt;&lt;%if(datasets[i].label){%&gt;&lt;%=datasets[i].label%&gt;&lt;%}%&gt;&lt;/li&gt;&lt;%}%&gt;&lt;/ul&gt;"
  
    }
  ];
  
  var chartDataRadar = {
      labels: ["QB", "RB", "WE/TE"],
      datasets: [
          {
              label: "NFL Chart",
              fillColor: "rgba(220,220,220,0.2)",
              strokeColor: "rgba(220,220,220,1)",
              pointColor: "rgba(220,220,220,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: [65, 59, 90]
          }
      ]
  };
  
  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 PolarPlot = React.createClass ({
    componentWillMount: function () {
        //console.log("this.state: " + JSON.stringify(AppStore.getAll()))
        FilterStore.addChangeListener  (this._onChange);
        this.setState
        ({
          chartData: chartData,
          chartDataRadar: chartDataRadar,
          chartOptions: chartOptions,
          chartOptionsRadar: chartOptionsRadarInit
        });
    },
  
    _onChange: function () {
      console.log("time to update")
  
      var filterBuild = FilterStore.getAll().build;
  
      var jsonToSend = {};
      jsonToSend["filterBuild"] = filterBuild;
      jsonToSend["population"] = "NFL";
      console.log("jsonToSend: " + JSON.stringify(jsonToSend));
  
  
      var that = this;
  
      $.post("polarPlot/polarPlotData", jsonToSend, function(data, status){
          // alert("Data: " +  JSON.stringify(data) + "\nStatus: " + status);
  
          console.log("QB");
          console.log(JSON.stringify(data));
  
          that.setState ({
            chartData: chartData = [
                {
                    value: data.QB,
                    color:"#F74A46",
                    highlight: "#FF5E5A",
                    label: "QB"
                },
                {
                    value: data.RB,
                    color:"#F7464A",
                    highlight: "#FF5A5E",
                    label: "RB"
                },
                {
                    value: data.WRTE,
                    color:"#46F74A",
                    highlight: "#5AFF5E",
                    label: "WR/TE"
                }],
  
                chartDataRadar: chartDataRadar = {
                    labels: ["QB", "RB", "WE/TE"],
                    datasets: [
                        {
                            label: "NFL Chart",
                            fillColor: "rgba(220,220,220,0.2)",
                            strokeColor: "rgba(220,220,220,1)",
                            pointColor: "rgba(220,220,220,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(220,220,220,1)",
                            data: [data.QB, data.RB, data.WRTE]
                        }
                    ]
                }
          });
  
      }, "json");
    },
  
    render: function () {
      return (
        &lt;div&gt;
          &lt;PolarAreaChart id="polarChart" data={chartData} options={chartOptions} redraw/&gt;
          &lt;RadarChart id="radarChart" data={chartDataRadar} options={chartOptionsRadarInit} redraw/&gt;
        &lt;/div&gt;
      );
    }
  });
  
  module.exports = PolarPlot;
  </code></pre>