Edit this page

VictoryChart

VictoryChart is a wrapper component that renders a given set of children on a set of Cartesian or polar axes. VictoryChart reconciles the domain for all its children, controls the layout of the chart, and coordinates animations and shared events. If no children are provided, VictoryChart will render a set of empty default axes.

            

Props

animate

VictoryChart uses the standard animate prop. Read about it here

See the Animations Guide for more detail on animations and transitions

note: VictoryChart controls the animate prop of its children when set. To animate individual children of VictoryChart, set the animate prop only on children, and not on the VictoryChart wrapper.

animate={{
  duration: 2000,
  onLoad: { duration: 1000 }
}}

children

VictoryChart works with any combination of the following children: VictoryArea, VictoryAxis / VictoryPolarAxis, VictoryBar, VictoryCandlestick, VictoryErrorBar, VictoryGroup, VictoryLine, VictoryScatter, VictoryStack, and VictoryVoronoi. Children supplied to VictoryChart will be cloned and rendered with new props so that all children share common props such as domain and scale.

Note: polar charts must use VictoryPolarAxis rather than VictoryAxis

containerComponent

VictoryChart uses the standard containerComponent prop. Read about it in detail here

containerComponent={<VictoryVoronoiContainer dimension="x"/>}

domain

VictoryChart uses the standard domain prop. Read about it in detail here

note: VictoryChart controls the domain prop of its children.

domain={{x: [0, 100], y: [0, 1]}}

domainPadding

VictoryChart uses the standard domainPadding prop. Read about it in detail here

note: VictoryChart controls the domainPadding prop of its children.

domainPadding={{x: [10, -10], y: 5}}

endAngle

The endAngle props defines the overall end angle of a polar chart in degrees. This prop is used in conjunction with startAngle to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise.

default: endAngle={360}

            

events

VictoryChart uses the standard events prop. Read about it in more detail here

See the Events Guide for more information on defining events.

Note: VictoryChart coordinates events between children using the VictorySharedEvents and the sharedEvents prop

            

groupComponent

VictoryChart uses the standard groupComponent prop. Read about it in detail here

default: <g/>

groupComponent={<g transform="translate(10, 10)" />}

height

VictoryChart uses the standard height prop. Read about it in detail here

note: VictoryChart controls the height prop of its children.

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

height={400}

innerRadius

When the innerRadius prop is set, polar charts will be hollow rather than circular.

            

padding

VictoryChart uses the standard padding prop. Read about it in detail here

note: VictoryChart controls the padding prop of its children.

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

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

polar

VictoryChart uses the standard polar prop. Read about it in detail here

Notes:

  • VictoryChart controls the polar prop of its children
  • Polar charts should use VictoryPolarAxis rather than VictoryAxis
            

range

The range prop is usually calculated based on other props. It will not typically be necessary to set a range prop manually

note: VictoryChart controls the range prop of its children.

Read about the range prop in detail

scale

VictoryChart uses the standard scale prop. Read about it in detail here

note: VictoryChart controls the scale prop of its children.

default: scale="linear"

scale={{x: "linear", y: "log"}}

sharedEvents

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

standalone

VictoryChart uses the standard standalone prop. Read about it in detail here

note: VictoryChart sets `standalone={false} for all of its children.

default: standalone={true}

            

startAngle

The startAngle props defines the overall start angle of a polar chart in degrees. This prop is used in conjunction with endAngle to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise.

default: startAngle={0}

            

style

VictoryChart uses the standard style prop. Read about it in detail here

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

            

theme

VictoryChart uses the standard theme prop. Read about it in detail here

See the Themes Guide for information about creating custom themes.

default: theme={VictoryTheme.grayscale}

theme={VictoryTheme.material}

width

VictoryChart uses the standard width prop. Read about it in detail here

note: VictoryChart controls the width prop of its children.

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

width={400}