victory-pie

What is victory-pie?

The victory-pie npm package is a part of the Victory library, which provides a set of modular charting components for React. Specifically, victory-pie is used to create pie and donut charts with a variety of customizable options.

What are victory-pie's main functionalities?

Basic Pie Chart

This code demonstrates how to create a basic pie chart using the victory-pie package. The data prop is used to pass the data to the VictoryPie component.

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

const data = [
  { x: 'Cats', y: 35 },
  { x: 'Dogs', y: 40 },
  { x: 'Birds', y: 25 }
];

const BasicPieChart = () => (
  <VictoryPie data={data} />
);

export default BasicPieChart;

Donut Chart

This code demonstrates how to create a donut chart by setting the innerRadius prop on the VictoryPie component.

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

const data = [
  { x: 'Cats', y: 35 },
  { x: 'Dogs', y: 40 },
  { x: 'Birds', y: 25 }
];

const DonutChart = () => (
  <VictoryPie data={data} innerRadius={100} />
);

export default DonutChart;

Custom Colors

This code demonstrates how to customize the colors of the pie chart slices using the colorScale prop.

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

const data = [
  { x: 'Cats', y: 35 },
  { x: 'Dogs', y: 40 },
  { x: 'Birds', y: 25 }
];

const CustomColorsPieChart = () => (
  <VictoryPie data={data} colorScale={['tomato', 'orange', 'gold']} />
);

export default CustomColorsPieChart;

Labels

This code demonstrates how to add custom labels to the pie chart slices using the labels prop.

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

const data = [
  { x: 'Cats', y: 35 },
  { x: 'Dogs', y: 40 },
  { x: 'Birds', y: 25 }
];

const LabeledPieChart = () => (
  <VictoryPie data={data} labels={({ datum }) => `${datum.x}: ${datum.y}%`} />
);

export default LabeledPieChart;

Other packages similar to victory-pie

recharts

Recharts is a composable charting library built on React components. It provides a variety of chart types, including pie charts, and is known for its simplicity and ease of use. Compared to victory-pie, Recharts offers a broader range of chart types and more extensive documentation.

nivo

Nivo provides a rich set of dataviz components, built on top of D3 and React. It offers highly customizable and responsive charts, including pie charts. Nivo is known for its beautiful default themes and extensive customization options, making it a strong alternative to victory-pie.

react-chartjs-2

React-chartjs-2 is a React wrapper for Chart.js, a popular JavaScript charting library. It supports a wide range of chart types, including pie charts, and is known for its performance and ease of integration. Compared to victory-pie, react-chartjs-2 leverages the powerful Chart.js library, providing a different set of customization options and performance characteristics.

README

VictoryPie

victory-pie@^30.0.0 exports VictoryPie and Slice components

To view documentation for VictoryPie please see https://commerce.nearform.com/open-source/victory/docs/victory-pie

To suggest an addition or correction to this documentation please see https://github.com/FormidableLabs/victory/blob/main/docs/src/content/docs/victory-pie.md