react-chartjs pie chart not rendering

Question

I copied the react-chartjs folder and did the below:

Did requiring of the react-chartjs/pie library at the top. I do not see any console errors but my pie chart is not rendered. I even tried putting all options mentioned here.

var PieChart = require('../../components/react-chartjs/pie');

var MyComponent = React.createClass({
  render: function() {
  var pieOptions = {
            animatable: true,
      };
  var pieData = [
              {
                  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"
              }
          ];
    return <PieChart data={pieData} options={pieOptions}/>
 }
});

$(function(){
    var feedsList = Global_feedsList;
    console.log("feeds:"+feedsList); 
    React.renderComponent(
        <BreadCrumb breadCrumbs={['Admin','Brokers']}/>,
        document.getElementById('ribbon')
    );

    React.renderComponent(
            <PVDashboard feedsList={feedsList}/>, document.getElementById('content')
    );

    React.renderComponent(
            <MyComponent />, document.getElementById('mycomponent')
    );

})    


var pieOptions = {
            animatable: true,
            segmentShowStroke : true,
            segmentStrokeColor : "#fff",
            segmentStrokeWidth : 2,
            percentageInnerCutout : 0,
            animationSteps : 100,
            animationEasing : "easeOutBounce",
            animateRotate : true,
            legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
  };

Used both these sites as references to write above code: http://jhudson8.github.io/react-chartjs/index.html http://www.chartjs.org/docs/#doughnut-pie-chart

Answer 1

I know this is an old question but I ran into the exact same issue as the one above. No errors, the data and options matched the chartjs documentation.

The fix for me was I did not include vanilla chartjs requirement to the project itself. The documenation (https://github.com/jhudson8/react-chartjs/) states the following: You must also include chart.js and React as dependencies.

So when I added the following:

var PieChart = require('../../components/react-chartjs/pie'); // From Example
var Chart = require('chartjs'); 

My charts started showing up. Hope this helps anyone else who may be frustrated with charts not showing up with no errors or anything. You'll know what I'm talking about when you view source and just see a blank canvas.

Answer 2

@peter same issue. Needed to add the following line in bold to make everything work:

import React from 'react';
var LChart = require("react-chartjs").Line;
**var Chart = require('chartjs');**
class LineChart extends React.Component {


    render() {

        return <LChart data={this.props.data} width="600" height="250" redraw/>
    }   

}

export default LineChart;