How to the Use React Minimal Pie Chart Library

react-minimal-pie-chart is a tiny, lightweight pie charting React library. After reviewing the landscape, react-minimal-pie-chart is the smallest and simplest way to create pie (or donut) charts for your React app. The following is a quick introduction to get you up and running.

First, install the library:

npm install react-minimal-pie-chart

And import it into your component:

import { PieChart } from 'react-minimal-pie-chart';

Now you can use the <PieChart /> component.

There are quite a few options you can use to customize your pie charts. The most basic and important property is the data property, which takes an array of objects. A basic chart will have the following keys: title, value, and color. For example, your data attribute might look like this:

data={[
    {
      title: "Test 1",
      value: 50,
      color: "#000000"
    },
    {
      title: "Test 2",
      value: 50,
      color: "#ffffff"
    }
]}

To get your labels to show up, you'll need to add the following property: label={({ dataEntry }) => dataEntry.title}.

And to style your labels, you set the labelStyle property to an object of SVG CSS properties and values. For example:

labelStyle={{
    fill: "white",
    fontSize: "5px",
    fontFamily: "Helvetica Neue,sans-serif",
    textShadow: "1px 1px 5px #000"
    }}

You can also position your labels with labelPosition, which takes a number 0-100 (for a percent from center).

Here is a complete example of a basic pie chart component:

<PieChart
    label={({ dataEntry }) => dataEntry.title}
    labelStyle={
        {
            fill: "white",
            fontSize: "5px",
            fontFamily: "Helvetica Neue,sans-serif",
            textShadow: "1px 1px 5px #000"
        }
    }
    labelPosition={75}
    data={
        [
            {
              title: "Test 1",
              value: 50,
              color: "#000000"
            },
            {
              title: "Test 2",
              value: 50,
              color: "#ffffff"
            }
        ]
    }
/>

Which will give you a pie chart that looks like this:

If you want to add more, you can animate your pie chart on component render and even add mouse interactions. Check out the documentation here.