3 great libraries to create pie charts in React (including examples)

April 30, 2020 Goodman Loading... Post a comment

There are various libraries out there to help you create a beautiful pie chart (AKA circle chart, pie graph e.t.c) in React without any pain.

victory-pie

A very-easy-to-use chart drawing library.

Example

Install victory-pie by executing:

yarn add victory-pie

Or:

npm install victory-pie --save

Create a new React app and replace the default code in your App.js with the following snippet:

import React from "react";
import { VictoryPie } from "victory-pie";

const myData = [
  { x: "Group A", y: 900 },
  { x: "Group B", y: 400 },
  { x: "Group C", y: 300 },
];

const App = () => {
  return (
    <div>
      <VictoryPie
        data={myData}
        colorScale={["blue", "yellow", "red"]}
        radius={100}
      />
    </div>
  );
};

export default App;

Result:

Learn more: https://github.com/formidablelabs/victory

reacharts

This one is not very lightweight but powerful.

Install:

npm install recharts --save

Or:

yarn add recharts

Examples

App.js:

import React from "react";
import { PieChart, Pie, Tooltip } from "recharts";

const myData = [
  { name: "Group A", value: 900 },
  { name: "Group B", value: 400 },
  { name: "Group C", value: 300 },
];

const App = () => {
  return (
    <PieChart width={800} height={800}>
      <Pie
        dataKey="value"
        isAnimationActive={true}
        data={myData}
        outerRadius={300}
        fill="orangered"
        label
      />

      {/* Display the tooltips */}
      <Tooltip />
    </PieChart>
  );
};

export default App;

Execute npm start and browse to http://localhost:3000. You’ll see something like this:

Learn more about recharts: https://github.com/recharts/recharts

react-minimal-pie-chart

A lightweight library for creating pie graphs (just only 164kB).

Example

Install:

npm install react-minimal-pie-chart --save

The code in the App.js file:

import React from "react";
import { PieChart } from "react-minimal-pie-chart";

const myData = [
  { title: "Dogs", value: 100, color: "orange" },
  { title: "Cats", value: 50, color: "green" },
  { title: "Dragons", value: 15, color: "purple" },
];

const App = () => {
  return (
    <div>
      <PieChart
        // your data
        data={myData}
        // width and height of the view box
        viewBoxSize={[600, 600]}
      />
    </div>
  );
};

export default App;

Output:

Reference: https://github.com/toomuchdesign/react-minimal-pie-chart

Happy coding and have a nice day 🙂

guest
0 Comments
Inline Feedbacks
View all comments

Related Articles

0
Would love your thoughts, please comment.x
()
x