Victory
Victory

About Docs Gallery Support GitHub FAQs

#
VictoryPie

`VictoryPie` renders a dataset as a pie chart.

##
animate

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

##
categories

`type: array[string] || { x: array[string], y: array[string] }`

`VictoryPie` uses the standard `categories` prop. Read about it here

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

##
colorScale

`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"`

##
containerComponent

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

##
cornerRadius

`type: number || function`

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.

##
data

`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.

##
dataComponent

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

##
endAngle

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

##
eventKey

`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";

##
events

`type: array[object]`

`VictoryPie` uses the standard `events` prop. Read about it here

See the Events Guide for more information on defining events.

##
externalEventMutations

`type: array[object]`

`VictoryPie` uses the standard `externalEventMutations` prop. Read about it in detail

##
groupComponent

`type: element`

`VictoryPie` uses the standard `groupComponent` prop. Read about it here

default: `<g/>`

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

##
height

`type: number`

`VictoryPie` uses the standard `height` prop. Read about it here

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

    height={400}

##
innerRadius

`type: number || function`

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

##
labelComponent

`type: element`

`VictoryPie` uses the standard `labelComponent` prop. Read about it here

default: `<VictoryLabel/>`

##
labelPosition

`type "startAngle" || "endAngle" || "centroid"

The `labelPosition` prop specifies the angular position of each label relative to its corresponding slice. When this prop is not given, the label will be positioned at the centroid of each slice.

##
labelRadius

`type: number || function`

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.

##
labels

`type: array || function`

`VictoryPie` uses the standard `labels` prop. Read about it here

##
name

`type: string`

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

    name = "series-1";

##
origin

`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.

##
padAngle

`type: number || function`

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.

##
padding

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

##
radius

`type: number || function`

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.

##
sharedEvents

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

##
sortKey

`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";

##
sortOrder

`type: "ascending" || "descending"`

The `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.

default: `sortOrder="ascending"`

##
standalone

`type: boolean`

`VictoryPie` uses the standard `standalone` prop. Read about it here

default: `standalone={true}`

##
startAngle

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

##
style

`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

##
theme

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

##
width

`type: number`

`VictoryPie` uses the standard `width` prop. Read about it here

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

    width={400}

##
x

`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";

##
y

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