VictoryPie
For examples of VictoryPie in action, visit the Pie Chart examples.
Inherited Props
VictoryDatableProps
VictoryMultiLabelableProps
VictoryCommonProps
- polarnot-implemented
Component Props
cornerRadius
The cornerRadius prop specifies the corner radius of the slices rendered in the pie chart. When given as a function, cornerRadius will be evaluated for each slice of the pie with an object corresponding to the props for that slice.
<VictoryPie cornerRadius={({ datum }) => datum.y * 5 } data={sampleData} theme={VictoryTheme.clean} />
endAngle
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.
<div> <VictoryPie startAngle={90} endAngle={450} data={sampleData} theme={VictoryTheme.clean} /> <VictoryPie startAngle={90} endAngle={-90} data={sampleData} theme={VictoryTheme.clean} /> </div>
eventKey
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
events
VictoryPie uses the standard events prop. Read about it here
See the [Events Guide][] for more information on defining events.
<div> <h3>Click a pie slice below</h3> <VictoryPie 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", }; }, }, ]; }, }, }, ]} data={sampleData} theme={VictoryTheme.clean} /> </div>
innerRadius
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. When this prop is given as a function, innerRadius will be evaluated for each slice of the pie with the props corresponding to that slice
<VictoryPie innerRadius={({ datum }) => datum.y * 20 } data={sampleData} theme={VictoryTheme.clean} />
labelIndicator
The labelIndicator prop defines the label indicator line between labels and the pie chart. If this prop is used as a boolean,then the default indicator will be displayed. To customize or pass your own styling <LineSegment/> can be passed to labelIndicator. LabelIndicator is functional only when labelPosition = "centroid". To adjust the labelIndicator length, labelIndicatorInnerOffset and labelIndicatorOuterOffset props can be used alongside labelIndicator.
<VictoryGroup theme={VictoryTheme.clean} > <VictoryPie data={sampleData} labelIndicator /> <VictoryPie data={sampleData} labelIndicator={ <LineSegment style={{ stroke: "red", strokeDasharray: 1, fill: "none", }} /> } /> <VictoryPie data={sampleData} labelIndicator={ <LineSegment style={{ stroke: "red", strokeDasharray: 1, fill: "none", }} /> } labelIndicatorInnerOffset={10} labelIndicatorOuterOffset={5} /> </VictoryGroup>
labelIndicatorInnerOffset
The labelIndicatorInnerOffset prop defines the offset by which the indicator length inside pie chart is being drawn. Higher the number shorter the length.
<VictoryPie data={sampleData} labelIndicator labelIndicatorInnerOffset={10} theme={VictoryTheme.clean} />
labelIndicatorOuterOffset
The labelIndicatorOuterOffset prop defines the offset by which the indicator length outside the pie chart is being drawn. Higher the number shorter the length.
<VictoryPie data={sampleData} labelIndicator labelIndicatorOuterOffset={5} />
labelPlacement
The labelPlacement prop specifies the angular placement of each label relative to the angle of its corresponding slice. This prop should be given as "parallel", "perpendicular", "vertical", or as a function that returns one of these values. When this prop is not given, the label will be placed vertically.
<VictoryPie data={sampleData} labels={({ datum }) => `y: ${datum.y}` } labelPosition={({ index }) => index ? "centroid" : "startAngle" } labelPlacement={({ index }) => index ? "parallel" : "vertical" } theme={VictoryTheme.clean} />
labelPosition
The labelPosition prop specifies the position of each label relative to its corresponding slice. This prop should be given as "startAngle", "endAngle", "centroid", or as a function that returns one of these values. When this prop is not given, the label will be positioned at the centroid of each slice.
<VictoryPie data={sampleData} labels={({ datum }) => datum.y} labelPosition={({ index }) => index ? "centroid" : "startAngle" } theme={VictoryTheme.clean} />
labelRadius
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. If this prop is given as a function, it will be evaluated for each label VictoryPie renders, and will be evaluated with the props that correspond to that label, as well as the radius and innerRadius of the corresponding slice. If labelIndicator prop is being used, passed labelRadius(> radius) is used to calculate the co-ordinates of the outer indicator line. If no specific value for labelRadius is passed , default values will be considered. The outer indicator line length is the difference between labelRadius and labelIndicatorOuterOffset.
<VictoryPie data={sampleData} labelRadius={({ innerRadius }) => innerRadius + 5 } radius={({ datum }) => 50 + datum.y * 20 } innerRadius={50} style={{ labels: { fill: "white", fontSize: 20, fontWeight: "bold", }, }} theme={VictoryTheme.clean} />
padAngle
The padAngle prop defines the amount of separation between adjacent data slices in number of degrees. When this prop is given as a function it will be evaluated for each slice, and will be evaluated with the props that correspond to that slice.
<VictoryPie padAngle={({ datum }) => datum.y} innerRadius={100} data={sampleData} />
radius
The radius prop specifies the radius of the pie. When this prop is not given, it will be calculated based on the width, height, and padding props. When this prop is given as a function it will be evaluated for each slice with the props corresponding to that slice.
<VictoryPie radius={({ datum }) => 20 + datum.y * 20 } data={sampleData} theme={VictoryTheme.clean} />
startAngle
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.
<div> <VictoryPie startAngle={90} endAngle={450} data={sampleData} theme={VictoryTheme.clean} /> <VictoryPie startAngle={90} endAngle={-90} data={sampleData} theme={VictoryTheme.clean} /> </div>
style
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} />