Add Charts into Our React App with Nivo — Pie Chart
Tags: codenewbie, webdev, javascript, react
Published: 2021-01-17 23:09:28

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

Nivo lets us add charts and data visualization into our React app.

In this article, we’ll look at how to add charts into our React app with Nivo.

### Pie Chart

Nivo comes with code to let us add a pie chart into our React app.

To install the required packages, we run:

```
npm i @nivo/pie
```

Then we can add the chart by writing:

```
import React from "react";
import { ResponsivePie } from "@nivo/pie";

const data = [
  {
    id: "c",
    label: "c",
    value: 120,
    color: "hsl(271, 70%, 50%)"
  },
  {
    id: "stylus",
    label: "stylus",
    value: 174,
    color: "hsl(292, 70%, 50%)"
  },
  {
    id: "go",
    label: "go",
    value: 225,
    color: "hsl(47, 70%, 50%)"
  }
];

const MyResponsivePie = ({ data }) => (
  <ResponsivePie
    data={data}
    margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
    innerRadius={0.5}
    padAngle={0.7}
    cornerRadius={3}
    colors={{ scheme: "nivo" }}
    borderWidth={1}
    borderColor={{ from: "color", modifiers: [["darker", 0.2]] }}
    radialLabelsSkipAngle={10}
    radialLabelsTextColor="#333333"
    radialLabelsLinkColor={{ from: "color" }}
    sliceLabelsSkipAngle={10}
    sliceLabelsTextColor="#333333"
    defs={[
      {
        id: "dots",
        type: "patternDots",
        background: "inherit",
        color: "rgba(255, 255, 255, 0.3)",
        size: 4,
        padding: 1,
        stagger: true
      },
      {
        id: "lines",
        type: "patternLines",
        background: "inherit",
        color: "rgba(255, 255, 255, 0.3)",
        rotation: -45,
        lineWidth: 6,
        spacing: 10
      }
    ]}
    fill={[
      {
        match: {
          id: "ruby"
        },
        id: "dots"
      },
      {
        match: {
          id: "c"
        },
        id: "dots"
      },
      {
        match: {
          id: "go"
        },
        id: "dots"
      },
      {
        match: {
          id: "python"
        },
        id: "dots"
      },
      {
        match: {
          id: "scala"
        },
        id: "lines"
      },
      {
        match: {
          id: "lisp"
        },
        id: "lines"
      },
      {
        match: {
          id: "elixir"
        },
        id: "lines"
      },
      {
        match: {
          id: "javascript"
        },
        id: "lines"
      }
    ]}
    legends={[
      {
        anchor: "bottom",
        direction: "row",
        justify: false,
        translateX: 0,
        translateY: 56,
        itemsSpacing: 0,
        itemWidth: 100,
        itemHeight: 18,
        itemTextColor: "#999",
        itemDirection: "left-to-right",
        itemOpacity: 1,
        symbolSize: 18,
        symbolShape: "circle",
        effects: [
          {
            on: "hover",
            style: {
              itemTextColor: "#000"
            }
          }
        ]
      }
    ]}
  />
);

export default function App() {
  return (
    <div style={{ width: 400, height: 300 }}>
      <MyResponsivePie data={data} />
    </div>
  );
}
```

We define the `data` array with the pie data.

`label` has the pie chunk labels.

`value` has the pie chunk size values.

Then add the `ResponsivePie` component into our chart.

`margin` has the margins.

`data` has the pie chart data.

`innerRadius` has the inner radius size.

`colors` have the color scheme for the pie slices.

`borderWidth` has the border width.

`borderColor` has the border-color scheme.

`radialLabelsSkipAngle` defines the angle threshold for when the label is hidden.

If it’s smaller than the given size, then the label is hidden.

`radialLabelsTextColor` has the text color of the pie.

`radialLabelsLinkColor` has the labels link color.

`sliceLabelsSkipAngle` has the angle threshold for skipping rendering the slice label.

If it’s smaller than the given threshold, then the slice label is hidden.

`sliceLabelsTextColor` has the text color.

`defs` have the pattern definitions for the slices.

`color` have the pattern color.

`type` has the pattern type.

`fill` has the fill color for the slices and legend.

`legends` has the legend settings.

`itemSpacing` , `itemWidth` , `itemHeight` , `itemTextColor` , and `itemDirection` has the item dimensions, spacing, and color.

`effects` have the effects when we hover over the legend items.

Then in `App` , we set the width and height to render the pie chart.

### Conclusion

We can add pie charts easily into our React app with Nivo.