React

Area

An area chart is used to display metrics for continuous data. It offers an area fill for visual emphasis that functions to indicate the cumulative data.

ExamplesProps

Examples

Note: PatternFly React charts live in its own package at @patternfly/react-charts!

PatternFly React charts are based on the Victory chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.

Learn to build an area chart using a Katacoda tutorial starting with a simple chart, adding multiple datasets, tooltips, axis labels, a legend, and concluding by changing the theme color. You'll learn how to use React chart components together to build a consistent user experience.

Start course

Simple area chart with right aligned legend

Copied to clipboard

Cyan area chart with bottom aligned legend and axis label

Copied to clipboard

Multi-color (unorderd) chart with bottom-left aligned legend and responsive container

Copied to clipboard

Multi-color chart with threshold indicators and responsive container

Copied to clipboard

Tips

  • For single data points or zero values, you may want to set the domain prop. See Victory's FAQ
  • ChartLegend may be used as a standalone component, instead of using legendData and legendPosition

Docs

Currently, the generated documention below is not able to resolve type definitions from Victory imports. For the components used in the examples above, Victory pass-thru props are also documented here:

Props

Chart props

The Chart component accepts the following props.

NameTypeRequiredDefaultDescription
allowZoombooleanfalseSpecifies the zoom capability of the container component. A value of true allows the chart to zoom in and out. Zoom events are controlled by scrolling. When zoomed in, panning events are controlled by dragging. By default this value is set to false. Note: Only compatible with charts that display an x, y axis
animateAnimatePropTypeInterfaceThe animate prop specifies props for VictoryAnimation to use. The animate prop should also be used to specify enter and exit transition configurations with the `onExit` and `onEnter` namespaces respectively. @example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}
ariaDescstringThe ariaDesc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. Note: Overridden by the desc prop of containerComponent
ariaTitlestringThe ariaTitle prop specifies the title to be applied to the SVG to assist accessibility for screen readers. Note: Overridden by the title prop of containerComponent
childrenReact.ReactNodeThe children to render with the chart
containerComponentReact.ReactElement<any>allowZoom ? <VictoryZoomContainer /> : <ChartContainer />The containerComponent prop takes an entire component which will be used to create a container element for standalone charts. The new element created from the passed containerComponent wil be provided with these props from ChartArea: height, width, children (the chart itself) and style. Props that are not provided by the child chart component include title and desc, both of which are intended to add accessibility to Victory components. The more descriptive these props are, the more accessible your data will be for people using screen readers. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a dataComponent is not provided, ChartArea will use the default ChartContainer component. @example <ChartContainer title="Chart of Dog Breeds" desc="This chart shows ..." />
domainDomainPropTypeThe domain prop describes the range of values your chart will include. This prop can be given as a array of the minimum and maximum expected values for your chart, or as an object that specifies separate arrays for x and y. If this prop is not provided, a domain will be calculated from data, or other available information. @example: [-1, 1], {x: [0, 100], y: [0, 1]}
domainPaddingDomainPaddingPropTypeThe domainPadding prop specifies a number of pixels of padding to add to the beginning and end of a domain. This prop is useful for explicitly spacing ticks farther from the origin to prevent crowding. This prop should be given as an object with numbers specified for x and y.
endAnglenumberThe 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.
eventKeyStringOrNumberOrCallbackSimilar to data accessor props `x` and `y`, this prop may be used to functionally assign eventKeys to data
eventsEventPropTypeInterface<string, StringOrNumberOrCallback>[]The event prop takes an array of event objects. Event objects are composed of a target, an eventKey, and eventHandlers. Targets may be any valid style namespace for a given component, so "data" and "labels" are all valid targets for ChartPie events. The eventKey may optionally be used to select a single element by index rather than an entire set. The eventHandlers object should be given as an object whose keys are standard event names (i.e. onClick) and whose values are event callbacks. The return value of an event handler is used to modify elemnts. The return value should be given as an object or an array of objects with optional target and eventKey keys, and a mutation key whose value is a function. The target and eventKey keys will default to those corresponding to the element the event handler was attached to. The mutation function will be called with the calculated props for the individual selected element (i.e. a single bar), and the object returned from the mutation function will override the props of the selected element via object assignment. @example events={[ { target: "data", eventKey: 1, eventHandlers: { onClick: () => { return [ { eventKey: 2, mutation: (props) => { return {style: merge({}, props.style, {fill: "orange"})}; } }, { eventKey: 2, target: "labels", mutation: () => { return {text: "hey"}; } } ]; } } } ]}
externalEventMutationsany[]Chart uses the standard externalEventMutations prop.
groupComponentReact.ReactElement<any>The groupComponent prop takes an entire component which will be used to create group elements for use within container elements. This prop defaults to a <g> tag on web, and a react-native-svg <G> tag on mobile
heightnumbertheme.chart.heightSpecifies the height the svg viewBox of the chart container. This value should be given as a number of pixels. Because Victory renders responsive containers, the width and height props do not determine the width and height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of pixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set to the same width in order to maintain the aspect ratio.
horizontalbooleanThe horizontal prop determines whether data will be plotted horizontally. When this prop is set to true, the independent variable will be plotted on the y axis and the dependent variable will be plotted on the x axis.
innerRadiusnumberWhen the innerRadius prop is set, polar charts will be hollow rather than circular.
legendComponentReact.ReactElement<any><ChartLegend/>The legend component to render with chart. Note: Use legendData so the legend width can be calculated and positioned properly. Default legend properties may be applied
legendData{ name?: string; symbol?: { fill?: string; type?: string; }; }[]Specify data via the data prop. ChartLegend expects data as an array of objects with name (required), symbol, and labels properties. The data prop must be given as an array. @example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}
legendOrientation'horizontal' | 'vertical'theme.legend.orientation as ChartLegendOrientationThe orientation prop takes a string that defines whether legend data are displayed in a row or column. When orientation is "horizontal", legend items will be displayed in a single row. When orientation is "vertical", legend items will be displayed in a single column. Line and text-wrapping is not currently supported, so "vertical" orientation is both the default setting and recommended for displaying many series of data.
legendPosition'bottom' | 'bottom-left' | 'right'ChartCommonStyles.legend.position as ChartLegendPositionThe legend position relation to the chart. Valid values are 'bottom', 'bottom-left', and 'right' Note: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some cases, the legend may not be visible until enough padding is applied.
maxDomainnumber | { x?: number, y?: number }The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum domain of a chart is static, while the minimum value depends on data or other variable information. If the domain prop is set in addition to maximumDomain, domain will be used. note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. examples: maxDomain={0} maxDomain={{ y: 0 }}
minDomainnumber | { x?: number, y?: number }The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum domain of a chart is static, while the maximum value depends on data or other variable information. If the domain prop is set in addition to minimumDomain, domain will be used. note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. examples: minDomain={0} minDomain={{ y: 0 }}
paddingPaddingPropsThe padding props specifies the amount of padding in number of pixels between the edge of the chart and any rendered child components. This prop can be given as a number or as an object with padding specified for top, bottom, left and right.
polarbooleanVictory components can pass a boolean polar prop to specify whether a label is part of a polar chart. **This prop should not be set manually.**
range[number, number] | { x?: [number, number], y?: [number, number] }The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this corresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this corresponds to a range of angles and radii. When this value is not given it will be calculated from the width, height, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given chart must share the same range, so setting this prop on children nested within Chart, ChartStack, or ChartGroup will have no effect. This prop is usually not set manually. examples: Cartesian: range={{ x: [50, 250], y: [50, 250] }} Polar: range={{ x: [0, 360], y: [0, 250] }}
scaleScalePropType | D3Scale | { x?: ScalePropType | D3Scale; y?: ScalePropType | D3Scale; }The scale prop determines which scales your chart should use. This prop can be given as a string specifying a supported scale ("linear", "time", "log", "sqrt"), as a d3 scale function, or as an object with scales specified for x and y @example d3Scale.time(), {x: "linear", y: "log"}
sharedEventsanyThe sharedEvents prop is used internally to coordinate events between components. It should not be set manually.
singleQuadrantDomainPaddingboolean | { x: boolean, y: boolean }By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive values, no amount of padding applied by domainPadding will result in a domain with negative values. This is the desired behavior in most cases. For users that need to apply padding without regard to quadrant, the singleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values specified for "x" and/or "y". When this prop is false (or false for a given dimension), padding will be applied without regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants. note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. examples: singleQuadrantDomainPadding={false} singleQuadrantDomainPadding={{ x: false }}
standalonebooleantrueThe standalone prop determines whether the component will render a standalone svg or a <g> tag that will be included in an external svg. Set standalone to false to compose Chart with other components within an enclosing <svg> tag.
startAnglenumberThe 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.
styleVictoryStyleInterfaceThe style prop defines the style of the component. The style prop should be given as an object with styles defined for data, labels and parent. Any valid svg styles are supported, but width, height, and padding should be specified via props as they determine relative layout for components in Chart.
themeChartThemeDefinitiongetTheme(themeColor, themeVariant)The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or props defined in theme may be overwritten by props specified on the component instance.
themeColorstringSpecifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
themeVariantstringSpecifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop @example themeVariant={ChartThemeVariant.light}
widthnumbertheme.chart.widthSpecifies the width of the svg viewBox of the chart container. This value should be given as a number of pixels. Because Victory renders responsive containers, the width and height props do not determine the width and height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of pixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set to the same width in order to maintain the aspect ratio.

ChartAxis props

The ChartAxis component accepts the following props.

NameTypeRequiredDefaultDescription
animateAnimatePropTypeInterfaceThe animate prop specifies props for VictoryAnimation to use. The animate prop should also be used to specify enter and exit transition configurations with the `onExit` and `onEnter` namespaces respectively. @example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}
axisComponentReact.ReactElement<any>The axisComponent prop takes in an entire component which will be used to create the axis line. The new element created from the passed axisComponent will be supplied with the following properties: x1, y1, x2, y2, style and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If an axisComponent is not supplied, ChartAxis will render its default AxisLine component.
axisLabelComponentReact.ReactElement<any>The axisLabelComponent prop takes in an entire component which will be used to create the axis label. The new element created from the passed axisLabelComponent will be supplied with the following properties: x, y, verticalAnchor, textAnchor, angle, transform, style and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If an axisLabelComponent is not supplied, a new ChartLabel will be created with props described above
axisValueanyThe axisValue prop may be used instead of axisAngle to position the dependent axis. Ths prop is useful when dependent axes should line up with values on the independent axis.
containerComponentReact.ReactElement<any><ChartContainer />The containerComponent prop takes an entire component which will be used to create a container element for standalone charts. The new element created from the passed containerComponent wil be provided with these props from ChartAxis: height, width, children (the chart itself) and style. Props that are not provided by the child chart component include title and desc, both of which are intended to add accessibility to Victory components. The more descriptive these props are, the more accessible your data will be for people using screen readers. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a dataComponent is not provided, ChartAxis will use the default ChartContainer component. @example <ChartContainer title="Chart of Dog Breeds" desc="This chart shows ..." />
crossAxisbooleanThis prop specifies whether a given axis is intended to cross another axis.
dependentAxisbooleanThe dependentAxis prop specifies whether the axis corresponds to the dependent variable (usually y). This prop is useful when composing axis with other components to form a chart.
domainDomainPropTypeThe domain prop describes the range of values your axis will include. This prop should be given as a array of the minimum and maximum expected values for your axis. If this value is not given it will be calculated based on the scale or tickValues. @example [-1, 1]
domainPaddingDomainPaddingPropTypeThe domainPadding prop specifies a number of pixels of padding to add to the beginning and end of a domain. This prop is useful for explicitly spacing ticks farther from the origin to prevent crowding. This prop should be given as an object with numbers specified for x and y.
eventsEventPropTypeInterface<'axis' | 'axisLabel' | 'grid' | 'ticks' | 'tickLabels' | 'parent', number | string>[]The event prop take an array of event objects. Event objects are composed of a target, an eventKey, and eventHandlers. Targets may be any valid style namespace for a given component, so "axis", "axisLabel", "ticks", "tickLabels", and "grid" are all valid targets for ChartAxis events. The eventKey may optionally be used to select a single element by index rather than an entire set. The eventHandlers object should be given as an object whose keys are standard event names (i.e. onClick) and whose values are event callbacks. The return value of an event handler be used to modify other elemnts. The return value should be given as an object or an array of objects with optional target and eventKey keys, and a mutation key whose value is a function. The target and eventKey keys will default to those corresponding to the element the event handler was attached to. The mutation function will be called with the calculated props for the individual selected element (i.e. a single tick), and the object returned from the mutation function will override the props of the selected element via object assignment. @example events={[ { target: "grid", eventKey: 2, eventHandlers: { onClick: () => { return [ { mutation: (props) => { return {style: merge({}, props.style, {stroke: "orange"})}; } }, { target: "tickLabels", mutation: () => { return {text: "hey"}; } } ]; } } } ]}
externalEventMutationsany[]ChartAxis uses the standard externalEventMutations prop.
fixLabelOverlapbooleanWhen true, this prop reduces the number of tick labels to fit the length of the axis. Labels are removed at approximately even intervals from the original array of labels. This feature only works well for labels that are approximately evenly spaced.
gridComponentReact.ReactElement<any>The gridComponent prop takes in an entire component which will be used to create grid lines. The new element created from the passed gridComponent will be supplied with the following properties: x1, y1, x2, y2, tick, style and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a gridComponent is not supplied, ChartAxis will render its default GridLine component.
groupComponentReact.ReactElement<any>The groupComponent prop takes an entire component which will be used to create group elements for use within container elements. This prop defaults to a <g> tag on web, and a react-native-svg <G> tag on mobile
heightnumberSpecifies the height the svg viewBox of the chart container. This value should be given as a number of pixels. Because Victory renders responsive containers, the width and height props do not determine the width and height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of pixels will depend on the size of the container the chart is rendered into.
invertAxisbooleanIf true, this value will flip the domain of a given axis.
labelanyThe label prop defines the label that will appear along the axis. This prop should be given as a value or an entire, HTML-complete label component. If a label component is given, it will be cloned. The new element's properties x, y, textAnchor, verticalAnchor, and transform will have defaults provided by the axis; styles filled out with defaults provided by the axis, and overrides from the label component. If a value is given, a new ChartLabel will be created with props and styles from the axis.
maxDomainnumber | { x?: number, y?: number }The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum domain of a chart is static, while the minimum value depends on data or other variable information. If the domain prop is set in addition to maximumDomain, domain will be used. note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. examples: maxDomain={0} maxDomain={{ y: 0 }}
minDomainnumber | { x?: number, y?: number }The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum domain of a chart is static, while the maximum value depends on data or other variable information. If the domain prop is set in addition to minimumDomain, domain will be used. note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. examples: minDomain={0} minDomain={{ y: 0 }}
namestringChartAxis uses the standard name prop
offsetXnumberThis value describes how far from the "edge" of its permitted area each axis will be set back in the x-direction. If this prop is not given, the offset is calculated based on font size, axis orientation, and label padding.
offsetYnumberThis value describes how far from the "edge" of its permitted area each axis will be set back in the y-direction. If this prop is not given, the offset is calculated based on font size, axis orientation, and label padding.
orientation'top' | 'bottom' | 'left' | 'right'The orientation prop specifies the position and orientation of your axis.
paddingPaddingPropsThe padding props specifies the amount of padding in number of pixels between the edge of the chart and any rendered child components. This prop can be given as a number or as an object with padding specified for top, bottom, left and right.
range[number, number] | { x?: [number, number], y?: [number, number] }The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this corresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this corresponds to a range of angles and radii. When this value is not given it will be calculated from the width, height, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given chart must share the same range, so setting this prop on children nested within Chart, ChartStack, or ChartGroup will have no effect. This prop is usually not set manually. examples: Cartesian: range={{ x: [50, 250], y: [50, 250] }} Polar: range={{ x: [0, 360], y: [0, 250] }}
scaleScalePropType | D3Scale | { x?: ScalePropType | D3Scale; y?: ScalePropType | D3Scale; }The scale prop determines which scales your chart should use. This prop can be given as a string specifying a supported scale ("linear", "time", "log", "sqrt"), as a d3 scale function, or as an object with scales specified for x and y @example d3Scale.time(), {x: "linear", y: "log"}
sharedEventsanyThe sharedEvents prop is used internally to coordinate events between components. It should not be set manually.
showGridbooleanfalseShow axis grid and ticks
singleQuadrantDomainPaddingboolean | { x: boolean, y: boolean }By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive values, no amount of padding applied by domainPadding will result in a domain with negative values. This is the desired behavior in most cases. For users that need to apply padding without regard to quadrant, the singleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values specified for "x" and/or "y". When this prop is false (or false for a given dimension), padding will be applied without regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants. note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. examples: singleQuadrantDomainPadding={false} singleQuadrantDomainPadding={{ x: false }}
standalonebooleanThe standalone prop determines whether the component will render a standalone svg or a <g> tag that will be included in an external svg. Set standalone to false to compose ChartAxis with other components within an enclosing <svg> tag.
style{ parent?: React.CSSProperties; axis?: React.CSSProperties; axisLabel?: React.CSSProperties; grid?: { [K in keyof React.CSSProperties]: | string | number | ((tick?: any) => string | number) }; ticks?: { [K in keyof React.CSSProperties]: | string | number | ((tick?: any) => string | number) }; tickLabels?: { [K in keyof React.CSSProperties]: | string | number | ((tick?: any) => string | number) }; }The style prop defines the style of the component. The style prop should be given as an object with styles defined for parent, axis, axisLabel, grid, ticks, and tickLabels. Any valid svg styles are supported, but width, height, and padding should be specified via props as they determine relative layout for components in Chart. Functional styles may be defined for grid, tick, and tickLabel style properties, and they will be evaluated with each tick. note: When a component is rendered as a child of another Victory component, or within a custom <svg> element with standalone={false} parent styles will be applied to the enclosing <g> tag. Many styles that can be applied to a parent <svg> will not be expressed when applied to a <g>. note: custom angle and verticalAnchor properties may be included in labels styles.
themeChartThemeDefinitiongetTheme(themeColor, themeVariant)The theme prop takes a style object with nested data, labels, and parent objects. You can create this object yourself, or you can use a theme provided by When using ChartAxis as a solo component, implement the theme directly on ChartAxis. If you are wrapping ChartAxis in ChartChart or ChartGroup, please call the theme on the outermost wrapper component instead.
themeColorstringSpecifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
themeVariantstringSpecifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop @example themeVariant={ChartThemeVariant.light}
tickComponentReact.ReactElement<any>The tickComponent prop takes in an entire component which will be used to create tick lines. The new element created from the passed tickComponent will be supplied with the following properties: x1, y1, x2, y2, tick, style and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a tickComponent is not supplied, ChartAxis will render its default Tick component.
tickCountnumberThe tickCount prop specifies approximately how many ticks should be drawn on the axis if tickValues are not explicitly provided. This value is calculated by d3 scale and prioritizes returning "nice" values and evenly spaced ticks over an exact number of ticks. If you need an exact number of ticks, please specify them via the tickValues prop. This prop must have a value greater than zero.
tickFormatany[] | ((tick: any, index: number, ticks: any[]) => string | number)The tickFormat prop specifies how tick values should be expressed visually. tickFormat can be given as a function to be applied to every tickValue, or as an array of display values for each tickValue. @example d3.time.format("%Y"), (x) => x.toPrecision(2), ["first", "second", "third"]
tickLabelComponentReact.ReactElement<any>The tickLabelComponent prop takes in an entire component which will be used to create the tick labels. The new element created from the passed tickLabelComponent will be supplied with the following properties: x, y, verticalAnchor, textAnchor, angle, tick, style and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If an tickLabelComponent is not supplied, a new ChartLabel will be created with props described above
tickValuesany[]The tickValues prop explicitly specifies which tick values to draw on the axis. @example ["apples", "bananas", "oranges"], [2, 4, 6, 8]
widthnumberSpecifies the width of the svg viewBox of the chart container. This value should be given as a number of pixels. Because Victory renders responsive containers, the width and height props do not determine the width and height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of pixels will depend on the size of the container the chart is rendered into. Note: innerRadius may need to be set when using this property.

ChartGroup props

The ChartGroup component accepts the following props.

NameTypeRequiredDefaultDescription
allowZoombooleanfalseSpecifies the zoom capability of the container component. A value of true allows the chart to zoom in and out. Zoom events are controlled by scrolling. When zoomed in, panning events are controlled by dragging. By default this value is set to false. Note: Only compatible with charts that display an x, y axis
animateAnimatePropTypeInterfaceThe animate prop specifies props for VictoryAnimation to use. The animate prop should also be used to specify enter and exit transition configurations with the `onExit` and `onEnter` namespaces respectively. @example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}
ariaDescstringThe ariaDesc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. Note: Overridden by the desc prop of containerComponent
ariaTitlestringThe ariaTitle prop specifies the title to be applied to the SVG to assist accessibility for screen readers. Note: Overridden by the title prop of containerComponent
categoriesCategoryPropTypeThe categories prop specifies how categorical data for a chart should be ordered. This prop should be given as an array of string values, or an object with these arrays of values specified for x and y. If this prop is not set, categorical data will be plotted in the order it was given in the data array @example ["dogs", "cats", "mice"]
childrenReact.ReactNodeThe children to render with the chart
colorstringThe color prop is an optional prop that defines a single color to be applied to the children of ChartGroup. The color prop will override colors specified via colorScale.
colorScaleColorScalePropTypeThe colorScale prop is an optional prop that defines the color scale the chart's bars will be created on. This prop should be given as an array of CSS colors, or as a string corresponding to one of the built in color scales. ChartGroup will automatically assign values from this color scale to the bars unless colors are explicitly provided in the `dataAttributes` prop.
containerComponentReact.ReactElement<any>allowZoom ? <VictoryZoomContainer /> : <ChartContainer />The containerComponent prop takes an entire component which will be used to create a container element for standalone charts. The new element created from the passed containerComponent wil be provided with these props from ChartGroup: height, width, children (the chart itself) and style. Props that are not provided by the child chart component include title and desc, both of which are intended to add accessibility to Victory components. The more descriptive these props are, the more accessible your data will be for people using screen readers. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a dataComponent is not provided, ChartGroup will use the default ChartContainer component. @example <ChartContainer title="Chart of Dog Breeds" desc="This chart shows..." />
dataany[]The data prop specifies the data to be plotted. Data should be in the form of an array of data points, or an array of arrays of data points for multiple datasets. Each data point may be any format you wish (depending on the `x` and `y` accessor props), but by default, an object with x and y properties is expected. @example [{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]], [[{x: "a", y: 1}, {x: "b", y: 2}], [{x: "a", y: 2}, {x: "b", y: 3}]]
domainDomainPropTypeThe domain prop describes the range of values your chart will cover. This prop can be given as a array of the minimum and maximum expected values for your bar chart, or as an object that specifies separate arrays for x and y. If this prop is not provided, a domain will be calculated from data, or other available information. @example [-1, 1], {x: [0, 100], y: [0, 1]}
domainPaddingDomainPaddingPropTypeThe domainPadding prop specifies a number of pixels of padding to add to the beginning and end of a domain. This prop is useful for explicitly spacing ticks farther from the origin to prevent crowding. This prop should be given as an object with numbers specified for x and y.
eventKeyStringOrNumberOrCallbackSimilar to data accessor props `x` and `y`, this prop may be used to functionally assign eventKeys to data
eventsEventPropTypeInterface<'data' | 'labels' | 'parent', 'all'>[]The event prop take an array of event objects. Event objects are composed of a target, an eventKey, and eventHandlers. Targets may be any valid style namespace for a given component, so "data" and "labels" are all valid targets for ChartGroup events. Since ChartGroup only renders a single element, the eventKey property is not used. The eventHandlers object should be given as an object whose keys are standard event names (i.e. onClick) and whose values are event callbacks. The return value of an event handler is used to modify elemnts. The return value should be given as an object or an array of objects with optional target and eventKey keys, and a mutation key whose value is a function. The target and eventKey keys will default to those corresponding to the element the event handler was attached to. The mutation function will be called with the calculated props for the individual selected element (i.e. an area), and the object returned from the mutation function will override the props of the selected element via object assignment. @example events={[ { target: "data", eventHandlers: { onClick: () => { return [ { mutation: (props) => { return {style: merge({}, props.style, {fill: "orange"})}; } }, { target: "labels", mutation: () => { return {text: "hey"}; } } ]; } } } ]}
externalEventMutationsany[]ChartGroup uses the standard externalEventMutations prop.
groupComponentReact.ReactElement<any>The groupComponent prop takes an entire component which will be used to create group elements for use within container elements. This prop defaults to a <g> tag on web, and a react-native-svg <G> tag on mobile
heightnumberThe height props specifies the height the svg viewBox of the chart container. This value should be given as a number of pixels
horizontalbooleanThe horizontal prop determines whether data will be plotted horizontally. When this prop is set to true, the independent variable will be plotted on the y axis and the dependent variable will be plotted on the x axis.
labelComponentReact.ReactElement<any>The labelComponent prop takes in an entire label component which will be used to create a label for the area. The new element created from the passed labelComponent will be supplied with the following properties: x, y, index, data, verticalAnchor, textAnchor, angle, style, text, and events. any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If labelComponent is omitted, a new ChartLabel will be created with props described above. This labelComponent prop should be used to provide a series label for ChartGroup. If individual labels are required for each data point, they should be created by composing ChartGroup with VictoryScatter
labelsstring[] | ((data: any) => string)The labels prop defines labels that will appear above each bar in your chart. This prop should be given as an array of values or as a function of data. If given as an array, the number of elements in the array should be equal to the length of the data array. Labels may also be added directly to the data object like data={[{x: 1, y: 1, label: "first"}]}. @example ["spring", "summer", "fall", "winter"], (datum) => datum.title
maxDomainnumber | { x?: number, y?: number }The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum domain of a chart is static, while the minimum value depends on data or other variable information. If the domain prop is set in addition to maximumDomain, domain will be used. note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. examples: maxDomain={0} maxDomain={{ y: 0 }}
minDomainnumber | { x?: number, y?: number }The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum domain of a chart is static, while the maximum value depends on data or other variable information. If the domain prop is set in addition to minimumDomain, domain will be used. note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. examples: minDomain={0} minDomain={{ y: 0 }}
namestringThe name prop is used to reference a component instance when defining shared events.
offsetnumberThe offset prop determines the number of pixels each element in a group should be offset from its original position of the on the independent axis. In the case of groups of bars, this number should be equal to the width of the bar plus the desired spacing between bars.
origin{ x: number, y: number }Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts. **This prop should not be set manually.**
paddingPaddingPropsThe padding props specifies the amount of padding in number of pixels between the edge of the chart and any rendered child components. This prop can be given as a number or as an object with padding specified for top, bottom, left and right.
polarbooleanVictory components can pass a boolean polar prop to specify whether a label is part of a polar chart. **This prop should not be set manually.**
range[number, number] | { x?: [number, number], y?: [number, number] }The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this corresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this corresponds to a range of angles and radii. When this value is not given it will be calculated from the width, height, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given chart must share the same range, so setting this prop on children nested within Chart, ChartGroup will have no effect. This prop is usually not set manually. examples: Cartesian: range={{ x: [50, 250], y: [50, 250] }} Polar: range={{ x: [0, 360], y: [0, 250] }}
samplesnumberThe samples prop specifies how many individual points to plot when plotting y as a function of x. Samples is ignored if x props are provided instead.
scaleScalePropType | D3Scale | { x?: ScalePropType | D3Scale; y?: ScalePropType | D3Scale; }The scale prop determines which scales your chart should use. This prop can be given as a string specifying a supported scale ("linear", "time", "log", "sqrt"), as a d3 scale function, or as an object with scales specified for x and y @example d3Scale.time(), {x: "linear", y: "log"}
sharedEventsanyThe sharedEvents prop is used internally to coordinate events between components. It should not be set manually.
singleQuadrantDomainPaddingboolean | { x: boolean, y: boolean }By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive values, no amount of padding applied by domainPadding will result in a domain with negative values. This is the desired behavior in most cases. For users that need to apply padding without regard to quadrant, the singleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values specified for "x" and/or "y". When this prop is false (or false for a given dimension), padding will be applied without regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants. note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. examples: singleQuadrantDomainPadding={false} singleQuadrantDomainPadding={{ x: false }}
sortKeystring | string[] | FunctionUse the sortKey prop to indicate how data should be sorted. This prop is given directly to the lodash sortBy function to be executed on the final dataset.
sortOrder'ascending' | 'descending'The sortOrder prop specifies whether sorted data should be returned in ascending or descending order.
standalonebooleanThe standalone prop determines whether the component will render a standalone svg or a <g> tag that will be included in an external svg. Set standalone to false to compose ChartGroup with other components within an enclosing <svg> tag.
styleVictoryStyleInterfaceThe style prop specifies styles for your ChartGroup. Any valid inline style properties will be applied. Height, width, and padding should be specified via the height, width, and padding props, as they are used to calculate the alignment of components within chart. @example {data: {fill: "red"}, labels: {fontSize: 12}}
themeChartThemeDefinitiongetTheme(themeColor, themeVariant)The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or props defined in theme may be overwritten by props specified on the component instance.
themeColorstringSpecifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
themeVariantstringSpecifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop @example themeVariant={ChartThemeVariant.light}
widthnumberThe width props specifies the width of the svg viewBox of the chart container This value should be given as a number of pixels
xDataGetterPropTypeThe x prop specifies how to access the X value of each data point. If given as a function, it will be run on each data point, and returned value will be used. If given as an integer, it will be used as an array index for array-type data points. If given as a string, it will be used as a property key for object-type data points. If given as an array of strings, or a string containing dots or brackets, it will be used as a nested object property path (for details see Lodash docs for _.get). If `null` or `undefined`, the data value will be used as is (identity function/pass-through). @example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)
yDataGetterPropTypeThe y prop specifies how to access the Y value of each data point. If given as a function, it will be run on each data point, and returned value will be used. If given as an integer, it will be used as an array index for array-type data points. If given as a string, it will be used as a property key for object-type data points. If given as an array of strings, or a string containing dots or brackets, it will be used as a nested object property path (for details see Lodash docs for _.get). If `null` or `undefined`, the data value will be used as is (identity function/pass-through). @example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)
y0DataGetterPropTypeUse y0 data accessor prop to determine how the component defines the baseline y0 data. This prop is useful for defining custom baselines for components like ChartBar or ChartArea. This prop may be given in a variety of formats. @example 'last_quarter_profit', () => 10, 1, 'employees.salary', ["employees", "salary"]

ChartLegend props

The ChartLegend component accepts the following props.

NameTypeRequiredDefaultDescription
borderComponentReact.ReactElement<any>The borderComponent prop takes a component instance which will be responsible for rendering a border around the legend. The new element created from the passed borderComponent will be provided with the following properties calculated by ChartLegend: x, y, width, height, and style. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a borderComponent is not provided, ChartLegend will use its default Border component. Please note that the default width and height calculated for the border component is based on approximated text measurements, and may need to be adjusted.
borderPaddingPaddingPropsThe borderPadding specifies the amount of padding that should be added between the legend items and the border. This prop may be given as a number, or asanobject with values specified for top, bottom, left, and right. Please note that the default width and height calculated for the border component is based on approximated text measurements, so padding may need to be adjusted.
centerTitlebooleanThe centerTitle boolean prop specifies whether a legend title should be centered.
colorScaleColorScalePropTypeThe colorScale prop defines a color scale to be applied to each data symbol in ChartLegend. 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". ChartLegend will assign a color to each symbol by index, unless they are explicitly specified in the data object. Colors will repeat when there are more symbols than colors in the provided colorScale.
containerComponentReact.ReactElement<any><ChartContainer />The containerComponent prop takes an entire component which will be used to create a container element for standalone charts. The new element created from the passed containerComponent wil be provided with these props from ChartLegend: height, width, children (the chart itself) and style. Props that are not provided by the child chart component include title and desc, both of which are intended to add accessibility to Victory components. The more descriptive these props are, the more accessible your data will be for people using screen readers. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a dataComponent is not provided, ChartLegend will use the default ChartContainer component. @example <ChartContainer title="Chart of Dog Breeds" desc="This chart shows ..." />
data{ name?: string; symbol?: { fill?: string; type?: string; }; }[]Specify data via the data prop. ChartLegend expects data as an array of objects with name (required), symbol, and labels properties. The data prop must be given as an array.
dataComponentReact.ReactElement<any><ChartPoint />The dataComponent prop takes a component instance which will be responsible for rendering a data element used to associate a symbol or color with each data series. The new element created from the passed dataComponent will be provided with the following properties calculated by ChartLegend: x, y, size, style, and symbol. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a dataComponent is not provided, ChartLegend will use its default Point component.
eventKeyStringOrNumberOrCallback | string[]ChartLegend uses the standard eventKey prop to specify how event targets are addressed. This prop is not commonly used.
eventsEventPropTypeInterface<'data' | 'labels' | 'parent', StringOrNumberOrCallback>[]ChartLegend uses the standard events prop.
externalEventMutationsany[]ChartLegend uses the standard externalEventMutations prop.
groupComponentReact.ReactElement<any>The groupComponent prop takes an entire component which will be used to create group elements for use within container elements. This prop defaults to a <g> tag on web, and a react-native-svg <G> tag on mobile
gutternumber | {left: number, right: number}The gutter prop defines the number of pixels between legend rows or columns, depending on orientation. When orientation is horizontal, gutters are between columns. When orientation is vertical, gutters are the space between rows.
heightnumberSpecifies the height the svg viewBox of the chart container. This value should be given as a number of pixels. Because Victory renders responsive containers, the width and height props do not determine the width and height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of pixels will depend on the size of the container the chart is rendered into.
itemsPerRownumberThe itemsPerRow prop determines how many items to render in each row of a horizontal legend, or in each column of a vertical legend. This prop should be given as an integer. When this prop is not given, legend items will be rendered in a single row or column.
labelComponentReact.ReactElement<any>The labelComponent prop takes a component instance which will be used to render each legend label. The new element created from the passed labelComponent will be supplied with the following properties: x, y, style, and text. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If labelComponent is omitted, a new ChartLabel will be created with the props described above.
orientation'horizontal' | 'vertical'The orientation prop takes a string that defines whether legend data are displayed in a row or column. When orientation is "horizontal", legend items will be displayed in a single row. When orientation is "vertical", legend items will be displayed in a single column. Line and text-wrapping is not currently supported, so "vertical" orientation is both the default setting and recommended for displaying many series of data.
paddingPaddingPropsThe padding props specifies the amount of padding in number of pixels between the edge of the chart and any rendered child components. This prop can be given as a number or as an object with padding specified for top, bottom, left and right.
responsivebooleantrueThe responsive prop specifies whether the rendered container should be a responsive container with a viewBox attribute, or a static container with absolute width and height. Useful when legend is located inside a chart -- default is false. Note: Not compatible with containerComponent prop
rowGutternumber | Omit<BlockProps, 'left' | 'right'>The rowGutter prop defines the number of pixels between legend rows. This prop may be given as a number, or as an object with values specified for “top” and “bottom” gutters. To set spacing between columns, use the gutter prop.
sharedEventsanyThe sharedEvents prop is used internally to coordinate events between components. It should not be set manually.
standalonebooleanThe standalone prop determines whether the component will render a standalone svg or a <g> tag that will be included in an external svg. Set standalone to false to compose ChartLegend with other components within an enclosing <svg> tag.
styleVictoryStyleInterfaceThe style prop specifies styles for your pie. ChartLegend relies on Radium, so valid Radium style objects should work for this prop. Height, width, and padding should be specified via the height, width, and padding props. @example {data: {stroke: "black"}, label: {fontSize: 10}}
symbolSpacernumberThe symbolSpacer prop defines the number of pixels between data components and label components.
themeChartThemeDefinitiongetTheme(themeColor, themeVariant)The theme prop takes a style object with nested data, labels, and parent objects. You can create this object yourself, or you can use a theme provided by When using ChartLegend as a solo component, implement the theme directly on ChartLegend. If you are wrapping ChartLegend in ChartChart or ChartGroup, please call the theme on the outermost wrapper component instead.
themeColorstringSpecifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
themeVariantstringSpecifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop @example themeVariant={ChartThemeVariant.light}
titlestring | string[]The title prop specifies a title to render with the legend. This prop should be given as a string, or an array of strings for multi-line titles.
titleComponentReact.ReactElement<any>The titleComponent prop takes a component instance which will be used to render a title for the component. The new element created from the passed labelComponent will be supplied with the following properties: x, y, index, data, datum, verticalAnchor, textAnchor, style, text, and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If labelComponent is omitted, a new ChartLabel will be created with the props described above.
titleOrientationOrientationTypesThe titleOrientation prop specifies where the a title should be rendered in relation to the rest of the legend. Possible values for this prop are “top”, “bottom”, “left”, and “right”.
widthnumberSpecifies the width of the svg viewBox of the chart container. This value should be given as a number of pixels. Because Victory renders responsive containers, the width and height props do not determine the width and height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of pixels will depend on the size of the container the chart is rendered into.
xnumberThe x and y props define the base position of the legend element.
ynumberThe x and y props define the base position of the legend element.

ChartThreshold props

The ChartThreshold component accepts the following props.

NameTypeRequiredDefaultDescription

ChartVoronoiContainer props

The ChartVoronoiContainer component accepts the following props.

NameTypeRequiredDefaultDescription
activateDatabooleanWhen the activateData prop is set to true, the active prop will be set to true on all data components within a voronoi area. When this prop is set to false, the onActivated and onDeactivated callbacks will still fire, but no mutations to data components will occur via Victory’s event system.
activateLabelsbooleanWhen the activateLabels prop is set to true, the active prop will be set to true on all labels corresponding to points within a voronoi area. When this prop is set to false, the onActivated and onDeactivated callbacks will still fire, but no mutations to label components will occur via Victory’s event system. Labels defined directly on ChartVoronoiContainer via the labels prop will still appear when this prop is set to false.
allowTooltipbooleantrueSpecifies the tooltip capability of the container component. A value of true allows the chart to add a ChartTooltip component to the labelComponent property. This is a shortcut to display tooltips when the labels property is also provided.
classNamestringThe className prop specifies a className that will be applied to the outer-most div rendered by the container
constrainToVisibleAreabooleanfalseThe constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of the chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the center of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders.
disablebooleanWhen the disable prop is set to true, ChartVoronoiContainer events will not fire.
labels(point: any, index: number, points: any[]) => stringWhen a labels prop is provided to ChartVoronoiContainer it will render a label component rather than activating labels on the child components it renders. This is useful for creating multi- point tooltips. This prop should be given as a function which will be called once for each active point. The labels function will be called with the arguments point, index, and points, where point refers to a single active point, index refers to the position of that point in the array of active points, and points is an array of all active points.
labelComponentReact.ReactElement<any>allowTooltip ? <ChartTooltip /> : undefinedThe labelComponent prop specified the component that will be rendered when labels are defined on ChartVoronoiContainer. If the labels prop is omitted, no label component will be rendered.
mouseFollowTooltipsbooleanWhen the mouseFollowTooltip prop is set on VictoryVoronoiContainer, The position of the center of the tooltip follows the position of the mouse.
onActivated(points: any[], props: VictoryVoronoiContainerProps) => voidThe onActivated prop accepts a function to be called whenever new data points are activated. The function is called with the parameters points (an array of active data objects) and props (the props used by ChartVoronoiContainer).
onDeactivated(points: any[], props: VictoryVoronoiContainerProps) => voidThe onDeactivated prop accepts a function to be called whenever points are deactivated. The function is called with the parameters points (an array of the newly-deactivated data objects) and props (the props used by ChartVoronoiContainer).
radiusnumberWhen the radius prop is set, the voronoi areas associated with each data point will be no larger than the given radius. This prop should be given as a number.
responsivebooleanThe responsive prop specifies whether the rendered container should be a responsive container with a viewBox attribute, or a static container with absolute width and height. @default true
styleReact.CSSPropertiesThe style prop specifies styles for your VictoryContainer. Any valid inline style properties will be applied. Height and width should be specified via the height and width props, as they are used to calculate the alignment of components within the container. Styles from the child component will also be passed, if any exist. @examples {border: 1px solid red}
themeChartThemeDefinitiongetTheme(themeColor, themeVariant)The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or props defined in theme may be overwritten by props specified on the component instance.
themeColorstringSpecifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
themeVariantstringSpecifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop @example themeVariant={ChartThemeVariant.light}
voronoiBlackliststring[]The voronoiBlacklist prop is used to specify a list of components to ignore when calculating a shared voronoi diagram. Components with a name prop matching an element in the voronoiBlacklist array will be ignored by ChartVoronoiContainer. Ignored components will never be flagged as active, and will not contribute date to shared tooltips or labels.
voronoiDimension'x' | 'y'When the voronoiDimension prop is set, voronoi selection will only take the given dimension into account. For example, when dimension is set to “x”, all data points matching a particular x mouse position will be activated regardless of y value. When this prop is not given, voronoi selection is determined by both x any y values.
voronoiPaddingnumberWhen the voronoiPadding prop is given, the area of the chart that will trigger voronoi events is reduced by the given padding on every side. By default, no padding is applied, and the entire range of a given chart may trigger voronoi events. This prop should be given as a number.