Create a prop for a chart.js pie chart

If you create a component named PieChart in the PieChart.js file like this:

import React from 'react';
import { Pie } from 'react-chartjs-2';

export default class PieChart extends React.Component {
    render() {
        return (
            <div>
                <Pie
                    data={this.props.data}
                    options={{
                        title: {
                            display: true,
                            text: 'Average Rainfall per month',
                            fontSize: 20
                        },
                        legend: {
                            display: true,
                            position: 'left',
                        }
                    }}
                />
            </div>
        );
    }
}

Then you can import it from the App.js in this way:

import React from 'react';

import PieChart from './PieChart';

const state = {
  labels: ['January', 'February', 'March',
    'April', 'May'],
  datasets: [
    {
      label: 'Rainfall',
      backgroundColor: [
        '#B21F00',
        '#C9DE00',
        '#2FDE00',
        '#00A6B4',
        '#6800B4'
      ],
      hoverBackgroundColor: [
        '#501800',
        '#4B5000',
        '#175000',
        '#003350',
        '#35014F'
      ],
      data: [65, 59, 80, 81, 56]
    }
  ]
}

export default class App extends React.Component {
  render() {
    return (
      <PieChart data={state} />
    )
  }
}

Here I’ve created a custom props named data and passed it to the PieChart component which is being accessed by this.props.data in the PieChart component. You can create multiple props as you want. Like you can pass options as well in this way.

Also you can keep your data(which is passed from the App as data props) in the PieChart component and call it from anywhere you want by <PieChart />.

Note: I’ve kept App.js and PieChart.js both files in the same directory.

This how I used piechart in my project:
in another file, you can create a custom component and add your code like below

export const StatusChart = ({ data }) => {
  const [pieData, setPieData] = useState({});

  useEffect(() => {
    setPieData({
      labels: ['declined', 'accepted', 'goterror', 'inprogress'],
      datasets: [
        {
          data: [data.inprogress, data.got_error, data.accepted, data.declined],
          backgroundColor: ['#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'],
          hoverBackgroundColor: ['#FF5A5E', '#5AD3D1', '#FFC870', '#A8B3C5', '#616774'],
        },
      ],
    });
  }, [data]);

  return (
    <MDBContainer>
      <Pie data={pieData} options={{ responsive: true }} />
    </MDBContainer>
  );
};

and in App.js you can use useState to save data like below:

  const [generalData, setGeneralData] = useState(null);

and use it in your code:

{generalData ? <StatusChart data={generalData.status_chart} /> : <Spinner animation="border" />}