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

<VictoryPie
  cornerRadius={({ datum }) => datum.y * 5}
  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: ({ style }) => {
                return style.fill === "#c43a31" ? null : { style: { fill: "#c43a31" } };
              }
            }, {
              target: "labels",
              mutation: ({ text }) => {
                return 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 || 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

<VictoryPie
  innerRadius={({ datum }) => datum.y * 20}
  data={sampleData}
/>

type: element

VictoryPie uses the standard labelComponent prop. Read about it here

default: <VictoryLabel/>

<VictoryPie
  data={sampleData}
  labels={({ datum }) => datum.y}
  labelComponent={<VictoryLabel angle={45}/>}
/>

type "parallel" || "perpendicular" || "vertical" || function

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

type "startAngle" || "endAngle" || "centroid" || function

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

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

type: array || function

VictoryPie uses the standard labels prop. Read about it here

<VictoryPie
  data={sampleData}
  labels={({ datum }) => `y: ${datum.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 || 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.

<VictoryPie
  padAngle={({ datum }) => datum.y}
  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 || 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.

<VictoryPie
  radius={({ datum }) => 20 + datum.y * 20}
  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}

type: boolean || element

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.

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

type: number

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

type: number

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