victory-pie
Advanced tools
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.
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;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 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 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.
victory-pie@^30.0.0 exports VictoryPie and Slice components
View these docs at https://formidable.com/open-source/victory/docs/victory-pie to see live examples.
VictoryPie renders a dataset as a pie chart.
<VictoryPie
data={[
{ x: "Cats", y: 35 },
{ x: "Dogs", y: 40 },
{ x: "Birds", y: 55 }
]}
/>
type: boolean || object
VictoryPie uses the standard animate prop. Read about it here
See the Animations Guide for more detail on animations and transitions
animate={{
duration: 2000
}}
type: array[string] || { x: array[string], y: array[string] }
VictoryPie uses the standard categories prop. Read about it here
categories={{ x: ["dogs", "cats", "mice"] }}
type: array[string]
The colorScale prop defines a color scale to be applied to each slice of VictoryPie. This prop should be given as an array of CSS colors, or as a string corresponding to one of the built in color scales: "grayscale", "qualitative", "heatmap", "warm", "cool", "red", "green", "blue". VictoryPie will assign a color to each slice by index, unless they are explicitly specified in the data object. Colors will repeat when there are more slices than colors in the provided colorScale.
default (provided by default theme): colorScale="grayscale"
<VictoryPie
colorScale={["tomato", "orange", "gold", "cyan", "navy" ]}
data={sampleData}
/>
type: element
VictoryPie uses the standard containerComponent prop. Read about it here
Note: VictoryPie only works with the VictoryContainer component
default: containerComponent={<VictoryContainer/>}
containerComponent={<VictoryContainer responsive={false}/>}
type: number
The cornerRadius prop specifies the corner radius of the slices rendered in the pie chart.
<VictoryPie
cornerRadius={25}
data={sampleData}
/>
type: array[object]
VictoryPie uses the standard data prop. Read about it here
See the Data Accessors Guide for more detail on formatting and processing data.
<VictoryPie
data={[
{ x: 1, y: 2, label: "one" },
{ x: 2, y: 3, label: "two" },
{ x: 3, y: 5, label: "three" }
]}
/>
type: element
VictoryPie uses the standard dataComponent prop. Read about it here
VictoryPie supplies the following props to its dataComponent: data, datum, events, index, pathFunction, slice, style
See the Custom Components Guide for more detail on creating your own dataComponents
default: <Slice/>
dataComponent={<Slice events={{ onClick: handleClick }}/>}
type: number
The endAngle props defines the overall end angle of the pie in degrees. This prop is used in conjunction with startAngle to create a pie that spans only a segment of a circle, or to change overall rotation of the pie. This prop should be given as a number of degrees. Degrees are defined as starting at the 12 o'clock position, and proceeding clockwise.
default: endAngle={360}
<div>
<VictoryPie
startAngle={90}
endAngle={450}
data={sampleData}
/>
<VictoryPie
startAngle={90}
endAngle={-90}
data={sampleData}
/>
</div>
type: string || integer || array[string] || function
VictoryPie uses the standard eventKey prop to specify how event targets are addressed. This prop is not commonly used. Read about the eventKey prop in more detail here
eventKey = "x";
type: array[object]
VictoryPie uses the standard events prop. Read about it here
See the Events Guide for more information on defining events.
<div>
<h3>Click Me</h3>
<VictoryPie
events={[{
target: "data",
eventHandlers: {
onClick: () => {
return [
{
target: "data",
mutation: (props) => {
const fill = props.style && props.style.fill;
return fill === "#c43a31" ? null : { style: { fill: "#c43a31" } };
}
}, {
target: "labels",
mutation: (props) => {
return props.text === "clicked" ? null : { text: "clicked" };
}
}
];
}
}
}]}
data={sampleData}
/>
</div>
type: array[object]
VictoryPie uses the standard externalEventMutations prop. Read about it in detail
type: element
VictoryPie uses the standard groupComponent prop. Read about it here
default: <g/>
groupComponent={<g transform="rotate(90)" />}
type: number
VictoryPie uses the standard height prop. Read about it here
default (provided by default theme): height={400}
height={400}
type: number
The innerRadius prop determines the number of pixels between the center of the chart and the inner edge of a donut chart. When this prop is set to zero a regular pie chart is rendered.
<VictoryPie
innerRadius={100}
data={sampleData}
/>
type: element
VictoryPie uses the standard labelComponent prop. Read about it here
default: <VictoryLabel/>
<VictoryPie
data={sampleData}
labels={(d) => d.y}
labelComponent={<VictoryLabel angle={45}/>}
/>
type: "centroid" || "startAngle" || "endAngle"
The labelPosition prop defines the position inside the arc that will be used for positioning each slice label. If this props is not set, the label position will default to the centroid of the arc itself.
default: "centroid"
<VictoryPie
data={sampleData}
labelPosition="endAngle"
style={{ labels: { fill: "white", fontSize: 20, fontWeight: "bold" } }}
/>
type: number
The labelRadius prop defines the radius of the arc that will be used for positioning each slice label. If this prop is not set, the label radius will default to the radius of the pie + label padding.
<VictoryPie
data={sampleData}
labelRadius={90}
style={{ labels: { fill: "white", fontSize: 20, fontWeight: "bold" } }}
/>
type: array || function
VictoryPie uses the standard labels prop. Read about it here
<VictoryPie
data={sampleData}
labels={(d) => `y: ${d.y}`}
/>
type: string
The name prop is used to reference a component instance when defining shared events.
name = "series-1";
type: { x: number, y: number }
The origin prop specifies coordinates for the center of the pie. When this prop is not given, the origin will be calculated based on the width, height, and padding props.
<VictoryPie
origin={{ y: 250 }}
padding={100}
data={sampleData}
/>
type: number
The padAngle prop defines the amount of separation between adjacent data slices in number of degrees.
<VictoryPie
padAngle={3}
innerRadius={100}
data={sampleData}
/>
type: number || { top: number, bottom: number, left: number, right: number }
VictoryPie uses the standard padding prop. Read about it here
default (provided by default theme): padding={50}
padding={{ top: 20, bottom: 60 }}
type: number
The radius prop specifies the radius of the pie. When this prop is not given, it will be calculated base on the width, height, and padding props.
<VictoryPie
radius={100}
data={sampleData}
/>
The sharedEvents prop is used internally to coordinate events between components. It should not be set manually.
type: string || integer || array[string] || function
VictoryPie uses the standard sortKey prop. Read about it here
See the Data Accessors Guide for more detail on formatting and processing data.
sortKey = "x";
type: "ascending" || "descending"
The sortOrder prop specifies whether sorted data should be returned in ascending or descending order.
default: sortOrder="ascending"
type: boolean
VictoryPie uses the standard standalone prop. Read about it here
default: standalone={true}
<svg width={300} height={300}>
<circle cx={150} cy={150} r={50} fill="#c43a31"/>
<VictoryPie
standalone={false}
width={300} height={300}
innerRadius={75}
data={sampleData}
/>
</svg>
type: number
The startAngle props defines the overall start angle of the pie in degrees. This prop is used in conjunction with endAngle to create a pie that spans only a segment of a circle, or to change overall rotation of the pie. This prop should be given as a number of degrees. Degrees are defined as starting at the 12 o'clock position, and proceeding clockwise.
default: endAngle={0}
<div>
<VictoryPie
startAngle={90}
endAngle={450}
data={sampleData}
/>
<VictoryPie
startAngle={90}
endAngle={-90}
data={sampleData}
/>
</div>
type: { parent: object, data: object, labels: object }
VictoryPie uses the standard style prop. Read about it here
default (provided by default theme): See grayscale theme for more detail
<VictoryPie
style={{
data: {
fillOpacity: 0.9, stroke: "#c43a31", strokeWidth: 3
},
labels: {
fontSize: 25, fill: "#c43a31"
}
}}
data={sampleData}
/>
type: object
VictoryPie uses the standard theme prop. Read about it here
See the Themes Guide for information about creating custom themes.
default: theme={VictoryTheme.grayscale}
theme={VictoryTheme.material}
type: number
VictoryPie uses the standard width prop. Read about it here
default (provided by default theme): width={400}
width={400}
type: string || integer || array[string] || function
VictoryPie uses the standard x data accessor prop. Read about it here
See the Data Accessors Guide for more detail on formatting and processing data.
x = "employee.name";
type: string || integer || array[string] || function
VictoryPie uses the standard y data accessor prop. Read about it here
See the Data Accessors Guide for more detail on formatting and processing data.
y={(d) => d.value + d.error}
FAQs
Pie Component for Victory
The npm package victory-pie receives a total of 217,853 weekly downloads. As such, victory-pie popularity was classified as popular.
We found that victory-pie demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 20 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.