plotting pie chart with reactjs and chart.js

Question

i am trying to plot the pie chart using some dummy data. my react chart component looks like this:-

import React, {Component} from 'react';

import {Bar,Line,Pie} from 'react-chartjs-2';

class Chart extends Component {
    constructor(props){
        super(props);
        this.state = {
            chartData :props.chartData
        }
        console.log("props data ",props.chartData)
    }

    render(){
        return(
            <Pie 
            data={this.state.chartData}
            options={{
                title:'cool pie chart',
                text:"coolest data"
            }}
            />
        );
    }
}

export default Chart;

and i think the data passed on component is also absolutely fine.

but currently i can only plot the labels. like this:-

what am i missing ?

Answer 1

Use react-chartjs rather than react-chartjs-2. It works like a charm

Check the live demo here - https://stackblitz.com/edit/react-p2bb24?embed=1&file=index.js