Edit this page

VictoryPie

VictoryPie renders a dataset as a pie chart.

            

Props

animate

VictoryPie uses the standard animate prop. Read about it here

See the Animations Guide for more detail on animations and transitions

animate={{
  duration: 2000
}}

categories

VictoryPie uses the standard categories prop. Read about it here

categories={{ x: ["dogs", "cats", "mice"] }}

colorScale

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"

            

containerComponent

VictoryPie uses the standard containerComponent prop. Read about it here

Note: VictoryPie only works with VictoryContainerComponent

default: containerComponent={<VictoryContainerComponent/>}

containerComponent={<VictoryContainerComponent responsive={false}/>}

cornerRadius

The cornerRadius prop specifies the corner radius of the slices rendered in the pie chart.

            

data

VictoryPie uses the standard data prop. Read about it here

See the Data Accessors Guide for more detail on formatting and processing data.

            

dataComponent

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 }}/>}

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.

default: endAngle={360}

            

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

eventKey="x"

events

VictoryPie uses the standard events prop. Read about it here

See the Events Guide for more information on defining events.

            

groupComponent

VictoryPie uses the standard groupComponent prop. Read about it here

default: <g/>

groupComponent={<g transform="rotate(90)" />}

height

VictoryPie uses the standard height prop. Read about it here

default (provided by default theme): height={400}

height={400}

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.

            

labelComponent

VictoryPie uses the standard labelComponent prop. Read about it here

default: <VictoryLabel/>

            

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.

            

labels

VictoryPie uses the standard labels prop. Read about it here

            

name

The name prop is used to reference a component instance when defining shared events.

name="series-1"

padAngle

The padAngle prop defines the amount of separation between adjacent data slices in number of degrees.

            

padding

VictoryPie uses the standard padding prop. Read about it here

default (provided by default theme): padding={50}

padding={{ top: 20, bottom: 60 }}

sharedEvents

The sharedEvents prop is used internally to coordinate events between components. It should not be set manually.

sortKey

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"

standalone

VictoryPie uses the standard standalone prop. Read about it here

default: standalone={true}

            

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.

default: endAngle={0}

            

style

VictoryPie uses the standard style prop. Read about it here

default (provided by default theme): See grayscale theme for more detail

            

theme

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}

width

VictoryPie uses the standard width prop. Read about it here

default (provided by default theme): width={400}

width={400}

x

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"

y

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}