Pie
Pie charts can be used to visually represent proportions of a whole for a limited number of categories.
Basic
See the full API here. Typically composed with VictoryChart to create full charts.
<VictoryPie data={[ { x: "Cats", y: 35 }, { x: "Dogs", y: 40 }, { x: "Birds", y: 55 }, ]} theme={VictoryTheme.clean} />
Pie Chart - Semi Circular
Pie charts can be rendered within a specific angle range.
<VictoryPie startAngle={90} endAngle={-90} data={[ { x: "Cats", y: 35 }, { x: "Dogs", y: 40 }, { x: "Birds", y: 55 }, ]} theme={VictoryTheme.clean} />
Pie Chart - Donut
Pie charts can be rendered as donuts by setting the innerRadius prop.
<VictoryPie innerRadius={50} data={[ { x: "Cats", y: 30 }, { x: "Dogs", y: 35 }, { x: "Birds", y: 25 }, { x: "Rabbits", y: 10 }, ]} theme={VictoryTheme.clean} />
Pie Chart - Ring
Pie charts can be rendered as rings by adjusting various radius props.
<VictoryPie theme={VictoryTheme.clean} data={[ { x: "Cats", y: 70 }, { x: "Dogs", y: 30 }, ]} labels={[]} cornerRadius={20} startAngle={-6} innerRadius={80} />
Pie Chart - Exploded
Pie charts can be exploded to emphasize the categories.
<VictoryPie innerRadius={50} padAngle={5} data={[ { x: "Cats", y: 30 }, { x: "Dogs", y: 35 }, { x: "Birds", y: 25 }, { x: "Rabbits", y: 10 }, ]} theme={VictoryTheme.clean} />
Pie Chart - Ordered
Pie chart slices can be ordered using the standard categories prop.
<VictoryPie innerRadius={50} padAngle={5} data={[ { x: "Cats", y: 30 }, { x: "Dogs", y: 35 }, { x: "Birds", y: 25 }, { x: "Rabbits", y: 10 }, ]} categories={{ x: [ "Cats", "Birds", "Dogs", "Rabbits", ], }} theme={VictoryTheme.clean} />
Pie Chart - Variable radius
Pie charts can have variable radius by setting the radius prop to a function.
<VictoryPie radius={({ datum }) => datum.y + 75} data={[ { x: "Cats", y: 30 }, { x: "Dogs", y: 35 }, { x: "Birds", y: 25 }, { x: "Rabbits", y: 10 }, ]} theme={VictoryTheme.clean} />
Pie Chart - Center Labels
Pie charts can have center labels by providing a custom label.
<svg viewBox="0 0 400 400"> <VictoryPie standalone={false} width={400} height={400} data={[ { x: "Cats", y: 30 }, { x: "Dogs", y: 35 }, { x: "Birds", y: 25 }, { x: "Rabbits", y: 10 }, ]} innerRadius={68} labelRadius={100} theme={VictoryTheme.clean} /> <VictoryLabel textAnchor="middle" style={{ fontSize: 20 }} x={200} y={200} text="Pets" /> </svg>
Pie Chart - Independent Labels
Pie chart data can use independent labels in the dataset.
<VictoryPie innerRadius={50} data={[ { label: "Cats", x: 1, y: 30 }, { label: "Dogs", x: 2, y: 35 }, { label: "Birds", x: 3, y: 25 }, { label: "Rabbits", x: 4, y: 10 }, ]} theme={VictoryTheme.clean} />
Pie Chart - Label Position
Pie chart labels can be positioned at different points along each slice by using the labelPosition prop.
<VictoryPie theme={VictoryTheme.clean} radius={100} labelPosition="startAngle" labelPlacement="perpendicular" labels={({ datum }) => `${datum.l}\ndegrees` } data={[ { x: 1, y: 1, l: 0 }, { x: 2, y: 1, l: 45 }, { x: 3, y: 1, l: 90 }, { x: 4, y: 1, l: 135 }, { x: 5, y: 1, l: 180 }, { x: 6, y: 1, l: 225 }, { x: 7, y: 1, l: 270 }, { x: 8, y: 1, l: 315 }, ]} />
Pie Chart - Label Indicator
Pie charts can show a label indicator by setting the labelIndicator prop.
<VictoryPie theme={VictoryTheme.clean} radius={100} labelPlacement="perpendicular" labelIndicator labels data={[ { x: "Cats", y: 30 }, { x: "Dogs", y: 35 }, { x: "Birds", y: 25 }, { x: "Rabbits", y: 10 }, ]} />
Pie Chart - Custom Label Indicator
Pie charts can show a custom label indicator by setting the labelIndicator prop to a custom component.
<VictoryPie theme={VictoryTheme.clean} radius={100} labelIndicator={ <LineSegment style={{ stroke: "blue", strokeDasharray: 8, }} /> } labels data={[ { x: "Cats", y: 30 }, { x: "Dogs", y: 35 }, { x: "Birds", y: 25 }, { x: "Rabbits", y: 10 }, ]} />
Pie Chart - Tooltips
Tooltips can be added by using a VictoryTooltip component as the labelComponent.
<VictoryPie theme={VictoryTheme.clean} radius={100} labels={({ datum }) => `${datum.l}\ndegrees` } labelComponent={<VictoryTooltip />} data={[ { x: 1, y: 1, l: 0 }, { x: 2, y: 1, l: 45 }, { x: 3, y: 1, l: 90 }, { x: 4, y: 1, l: 135 }, { x: 5, y: 1, l: 180 }, { x: 6, y: 1, l: 225 }, { x: 7, y: 1, l: 270 }, { x: 8, y: 1, l: 315 }, ]} />
Pie Chart - Animation
Charts can be animated by setting the animate prop. See the animations guide for more information.
function App() { const [data, setData] = React.useState(getData()); React.useState(() => { const setStateInterval = window.setInterval(() => { setData(getData()); }, 4000); return () => { window.clearInterval( setStateInterval, ); }; }, []); return ( <VictoryPie theme={VictoryTheme.clean} animate={{ duration: 1000 }} data={data} /> ); } function getData() { const rand = () => Math.max( Math.floor(Math.random() * 10000), 1000, ); return [ { x: "5-13", y: rand() }, { x: "14-17", y: rand() }, { x: "18-24", y: rand() }, { x: "25-44", y: rand() }, { x: "45-64", y: rand() }, { x: "≥65", y: rand() }, ]; } render(<App />);
Pie Chart - Styles
Chart styling can be customized by using the theme or overriding the style prop on the component.
<VictoryPie data={[ { x: "Cats", y: 35 }, { x: "Dogs", y: 40 }, { x: "Birds", y: 55 }, ]} theme={VictoryTheme.clean} style={{ data: { fillOpacity: 0.9, stroke: "#c43a31", strokeWidth: 3, }, labels: { fontSize: 25, fill: "#c43a31", }, }} />
Pie Chart - Events
Events can be handled by passing an array of event objects to the events prop on the component. Each event object should specify a target and an eventHandlers object. See the events guide for more information.
<VictoryPie data={[ { x: "Cats", y: 35 }, { x: "Dogs", y: 40 }, { x: "Birds", y: 55 }, ]} theme={VictoryTheme.clean} events={[ { target: "data", eventHandlers: { onClick: () => { return [ { target: "data", mutation: ({ style }) => { return style.fill === "#c43a31" ? null : { style: { fill: "#c43a31", }, }; }, }, { target: "labels", mutation: ({ text }) => { return text === "clicked" ? null : { text: "clicked" }; }, }, ]; }, }, }, ]} />
Standalone Rendering
Pie charts can also be embeded in other SVG components by using the standalone prop.
<svg width={300} height={300} className="block mx-auto" > <circle cx={150} cy={150} r={50} fill="#2d7ff9" /> <VictoryPie standalone={false} width={300} height={300} innerRadius={75} data={[ { x: "Cats", y: 30 }, { x: "Dogs", y: 35 }, { x: "Birds", y: 25 }, { x: "Rabbits", y: 10 }, ]} theme={VictoryTheme.clean} /> </svg>