Patterns

Info alert:Beta feature

This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.

Introduction

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.

Examples

Basic pie chart

Bar chart

Stack chart

Donut chart

Donut utilization chart

This demonstrates how to hide a pattern for the static, unused portion of the donut utilization chart.

Donut utilization chart with thresholds

This demonstrates how to apply patterns to thresholds.

Interactive legend with pie chart

This demonstrates how to add an interactive legend to a pie chart using events such as onMouseOver, onMouseOut, and onClick.

Interactive legend with area chart

This demonstrates how to add an interactive legend using events such as onMouseOver, onMouseOut, and onClick.

Custom pattern visibility

This demonstrates how to omit patterns from pie chart segments.

Custom color scale

This demonstrates how to apply a custom color scale to patterns.

Custom pattern defs

This demonstrates how to create custom patterns.

All patterns

Documentation

Tips

See Victory's FAQ
ChartLegend may be used as a standalone component, instead of using legendData

Note

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:

For Chart props, see VictoryChart
For ChartArea props, see VictoryArea
For ChartAxis props, see VictoryAxis
For ChartBar props, see VictoryBar
For ChartDonut props, see VictoryPie
For ChartDonutThreshold props, see VictoryPie
For ChartDonutUtilization props, see VictoryPie
For ChartGroup props, see VictoryGroup
For ChartLegend props, see VictoryLegend
For ChartPie props, see VictoryPie
For ChartScatter props, see VictoryScatter
For ChartStack props, see VictoryStack
For ChartVoronoiContainer props, see VictoryVoronoiContainer

Props

Chart

Chart is a wrapper component that reconciles the domain for all its children, controls the layout of the chart, and coordinates animations and shared events. See https://github.com/FormidableLabs/victory/blob/main/packages/victory-chart/src/victory-chart.tsx
*required
Name	Type	Default	Description
animate	boolean \| object		The 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})})}
ariaDesc	string		The ariaDesc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. Note: Overridden by the desc prop of containerComponent
ariaTitle	string		The 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
backgroundComponent	React.ReactElement		The backgroundComponent prop takes a component instance which will be responsible for rendering a background if the Chart's style component includes background styles. The new element created from the passed backgroundComponent will be provided with the following properties calculated by Chart: height, polar, scale, style, x, y, width. All of these props on Background should take prececence over what VictoryChart is trying to set.
children	React.ReactNode \| React.ReactNode[]		The children to render with the chart
containerComponent	React.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 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 ..." />
domain	number[] \| { x: number[], y: number[] }		The 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 [low, high], { x: [low, high], y: [low, high] } [-1, 1], {x: [0, 100], y: [0, 1]}
domainPadding	number \| number[] \| { x: number[], y: number[] }		The 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. @example [left, right], { x: [left, right], y: [bottom, top] } {x: [10, -10], y: 5}
endAngle	number		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.
eventKey	number \| string \| Function		Similar to data accessor props `x` and `y`, this prop may be used to functionally assign eventKeys to data
events	object[]		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"}; } } ]; } } } ]}
externalEventMutations	object[]		Chart uses the standard externalEventMutations prop.
groupComponent	React.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
hasPatternsBeta	boolean \| boolean[]		The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart. SVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected color theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar to the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized patterns would be displayed in that same order. Create custom patterns via the patternScale prop. Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. @example hasPatterns={ true } @example hasPatterns={[ true, true, false ]}
height	number	theme.chart.height	Specifies 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.
horizontal	boolean		The 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.
innerRadius	number \| Function		When the innerRadius prop is set, polar charts will be hollow rather than circular.
legendAllowWrap	boolean	false	Allows legend items to wrap. A value of true allows the legend to wrap onto the next line if its container is not wide enough. Note: This is overridden by the legendItemsPerRow property
legendComponent	React.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	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.
legendPosition	'bottom' \| 'bottom-left' \| 'right'	ChartCommonStyles.legend.position	The 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.
maxDomain	number \| { 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. @example maxDomain={0} maxDomain={{ y: 0 }}
minDomain	number \| { 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. @example minDomain={0} minDomain={{ y: 0 }}
name	string		The name prop is typically used to reference a component instance when defining shared events. However, this optional prop may also be applied to child elements as an ID prefix. This is a workaround to ensure Victory based components output unique IDs when multiple charts appear in a page.
padding	number \| { top: number, bottom: number, left: number, right: number }		The 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.
patternScaleBeta	string[]		The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be given as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there are more children than patterns in the provided patternScale. Use null to omit the pattern for a given index. Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]}
polar	boolean		Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart.
range	number[] \| { x: number[], y: 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. @example [low, high] \| { x: [low, high], y: [low, high] } Cartesian: range={{ x: [50, 250], y: [50, 250] }} Polar: range={{ x: [0, 360], y: [0, 250] }}
scale	string \| { x: string, y: string }		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"}
showAxis	boolean	true	Convenience prop to hide both x and y axis, which are shown by default. Alternatively, the axis can be hidden via chart styles.
singleQuadrantDomainPadding	boolean \| { 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. @example singleQuadrantDomainPadding={false} singleQuadrantDomainPadding={{ x: false }}
standalone	boolean		The 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.
startAngle	number		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.
style	{ parent: object, background: object }		The 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. @propType { parent: object, background: object }
theme	object	getChartTheme(themeColor, showAxis)	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.
themeColor	string		Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
Deprecated: themeVariant	string		Specifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop Use PatternFly's pf-theme-dark CSS selector
width	number	theme.chart.width	Specifies 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.

ChartArea

ChartArea renders a dataset as a single area path. Since ChartArea renders only a single element to represent a dataset rather than individual elements for each data point, some of its behavior is different from other Victory based components. Pay special attention to style and events props, and take advantage of ChartVoronoiContainer to enable tooltips. ChartArea can be composed with Chart to create area charts. See https://github.com/FormidableLabs/victory/blob/main/packages/victory-area/src/victory-area.tsx
*required
Name	Type	Default	Description
animate	boolean \| object		The 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})})}
categories	string[] \| { x: string[], y: string[] }		The 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"]
containerComponent	React.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 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..." />
data	any[]		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}]]
dataComponent	React.ReactElement<any>		The dataComponent prop takes an entire component which will be used to create an area. The new element created from the passed dataComponent will be provided with the following properties calculated by ChartArea: a scale, style, events, interpolation, and an array of modified data objects (including x, y, and calculated y0 and y1). 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 its default Area component.
domain	number[] \| { x: number[], y: number[] }		The 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 [low, high], { x: [low, high], y: [low, high] } [-1, 1], {x: [0, 100], y: [0, 1]}
domainPadding	number \| number[] \| { x: number[], y: number[] }		The 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. @example [left, right], { x: [left, right], y: [bottom, top] } {x: [10, -10], y: 5}
eventKey	number \| string \| Function \| string[] \| number[]		Similar to data accessor props `x` and `y`, this prop may be used to functionally assign eventKeys to data
events	object[]		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 ChartArea events. Since ChartArea 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"}; } } ]; } } } ]}
externalEventMutations	object[]		ChartArea uses the standard externalEventMutations prop.
groupComponent	React.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
height	number		The height props specifies the height the svg viewBox of the chart container. This value should be given as a number of pixels
horizontal	boolean		The 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.
interpolation	string \| Function		The interpolation prop determines how data points should be connected when plotting a line. Polar area charts may use the following interpolation options: "basis", "cardinal", "catmullRom", "linear". Cartesian area charts may use the following interpolation options: "basis", "cardinal", "catmullRom", "linear", "monotoneX", "monotoneY", "natural", "step", "stepAfter", "stepBefore".
labelComponent	React.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 ChartArea. If individual labels are required for each data point, they should be created by composing ChartArea with VictoryScatter
labels	string[] \| number[] \| ((data: any) => string \| number \| null)		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
maxDomain	number \| { 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. @example maxDomain={0} maxDomain={{ y: 0 }}
minDomain	number \| { 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. @example minDomain={0} minDomain={{ y: 0 }}
name	string		The name prop is used to reference a component instance when defining shared events.
origin	{ x: number, y: number }		Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts. Note: It will not typically be necessary to set an origin prop manually
padding	number \| { top: number, bottom: number, left: number, right: number }		The 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.
polar	boolean		Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart.
range	number[] \| { x: number[], y: 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 or ChartGroup will have no effect. This prop is usually not set manually. @example [low, high] \| { x: [low, high], y: [low, high] } Cartesian: range={{ x: [50, 250], y: [50, 250] }} Polar: range={{ x: [0, 360], y: [0, 250] }}
samples	number		The 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.
scale	string \| { x: string, y: string }		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"}
singleQuadrantDomainPadding	boolean \| { 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. @example singleQuadrantDomainPadding={false} singleQuadrantDomainPadding={{ x: false }}
sortKey	number \| string \| Function \| string[]		Use 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	string		The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order.
standalone	boolean		The 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 ChartArea with other components within an enclosing <svg> tag.
style	{ parent: object, data: object, labels: object }		The style prop specifies styles for your ChartArea. 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}}
theme	object	getTheme(themeColor)	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 ChartArea as a solo component, implement the theme directly on ChartArea. If you are wrapping ChartArea in ChartChart or ChartGroup, please call the theme on the outermost wrapper component instead.
themeColor	string		Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
Deprecated: themeVariant	string		Specifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop Use PatternFly's pf-theme-dark CSS selector
width	number		The width props specifies the width of the svg viewBox of the chart container This value should be given as a number of pixels
x	number \| string \| Function \| string[]		The 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)
y	number \| string \| Function \| string[]		The 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)
y0	number \| string \| Function \| string[]		Use 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 ChartArea. This prop may be given in a variety of formats. @example 'last_quarter_profit', () => 10, 1, 'employees.salary', ["employees", "salary"]

ChartAxis

ChartAxis renders a single axis which can be used on its own or composed with Chart. See https://github.com/FormidableLabs/victory/blob/main/packages/victory-axis/src/index.d.ts
*required
Name	Type	Default	Description
animate	boolean \| object		The 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})})}
axisComponent	React.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.
axisLabelComponent	React.ReactElement<any>	<ChartLabel />	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
axisValue	number \| string \| object \| Date		The 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.
containerComponent	React.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 ..." />
crossAxis	boolean		This prop specifies whether a given axis is intended to cross another axis.
dependentAxis	boolean		The 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.
domain	number[] \| { x: number[], y: number[] }		The 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 [low, high], { x: [low, high], y: [low, high] } [-1, 1], {x: [0, 100], y: [0, 1]}
domainPadding	number \| number[] \| { x: number[], y: number[] }		The 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. @example [left, right], { x: [left, right], y: [bottom, top] } {x: [10, -10], y: 5}
events	object[]		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"}; } } ]; } } } ]}
externalEventMutations	object[]		ChartAxis uses the standard externalEventMutations prop.
fixLabelOverlap	boolean		When 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.
gridComponent	React.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.
groupComponent	React.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
height	number		Specifies 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.
invertAxis	boolean		If true, this value will flip the domain of a given axis.
label	any		The 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.
maxDomain	number \| { 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. @example maxDomain={0} maxDomain={{ y: 0 }}
minDomain	number \| { 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. @example minDomain={0} minDomain={{ y: 0 }}
name	string		The name prop is typically used to reference a component instance when defining shared events. However, this optional prop may also be applied to child elements as an ID prefix. This is a workaround to ensure Victory based components output unique IDs when multiple charts appear in a page.
offsetX	number		This 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.
offsetY	number		This 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	string		The orientation prop specifies the position and orientation of your axis. Valid values are 'top', 'bottom', 'left' and 'right'.
padding	number \| { top: number, bottom: number, left: number, right: number }		The 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[] \| { x: number[], y: 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. @example [low, high] \| { x: [low, high], y: [low, high] } Cartesian: range={{ x: [50, 250], y: [50, 250] }} Polar: range={{ x: [0, 360], y: [0, 250] }}
scale	string \| { x: string, y: string }		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"}
showGrid	boolean	false	Show axis grid and ticks
singleQuadrantDomainPadding	boolean \| { 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. @example singleQuadrantDomainPadding={false} singleQuadrantDomainPadding={{ x: false }}
standalone	boolean		The 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	{ axis: object, axisLabel: object, grid: object, ticks: object, tickLabels: object }		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.
theme	object	getTheme(themeColor)	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.
themeColor	string		Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
Deprecated: themeVariant	string		Specifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop Use PatternFly's pf-theme-dark CSS selector
tickComponent	React.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.
tickCount	number		The 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.
tickFormat	any[] \| ((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"]
tickLabelComponent	React.ReactElement<any>	<ChartLabel />	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
tickValues	any[]		The tickValues prop explicitly specifies which tick values to draw on the axis. @example ["apples", "bananas", "oranges"], [2, 4, 6, 8]
width	number		Specifies 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.

ChartBar

ChartBar renders a dataset as series of bars. ChartBar can be composed with Chart to create bar charts. See https://github.com/FormidableLabs/victory/blob/main/packages/victory-bar/src/index.d.ts
*required
Name	Type	Default	Description
alignment	string		The alignment prop specifies how bars should be aligned relative to their data points. This prop may be given as “start”, “middle” or “end”. When this prop is not specified, bars will have “middle” alignment relative to their data points.
animate	boolean \| object		The 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})})}
barRatio	number		The barRatio prop specifies an approximate ratio between bar widths and spaces between bars. When width is not specified via the barWidth prop or in bar styles, the barRatio prop will be used to calculate a default width for each bar given the total number of bars in the data series and the overall width of the chart.
barWidth	number \| Function		The barWidth prop is used to specify the width of each bar. This prop may be given as a number of pixels or as a function that returns a number. When this prop is given as a function, it will be evaluated with the arguments datum, and active. When this value is not given, a default value will be calculated based on the overall dimensions of the chart, and the number of bars.
categories	string[] \| { x: string[], y: string[] }		The 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"]
containerComponent	React.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 ChartBar: 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, ChartBar will use the default ChartContainer component. @example <ChartContainer title="Chart of Dog Breeds" desc="This chart shows..." />
cornerRadius	Function \| number \| { top, bottom, topLeft, topRight, bottomLeft, bottomRight }		The cornerRadius prop specifies a radius to apply to each bar. If this prop is given as a single number, the radius will only be applied to the top of each bar. When this prop is given as a function, it will be evaluated with the arguments datum, and active. @example {topLeft: ({ datum }) => datum.x * 4}
data	any[]		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}]]
dataComponent	React.ReactElement<any>		The dataComponent prop takes an entire component which will be used to create a bar. The new element created from the passed dataComponent will be provided with the following properties calculated by ChartBar: a scale, style, events, interpolation, and an array of modified data objects (including x, y, and calculated y0 and y1). 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, ChartBar will use its default Bar component.
domain	number[] \| { x: number[], y: number[] }		The 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 [low, high], { x: [low, high], y: [low, high] } [-1, 1], {x: [0, 100], y: [0, 1]}
domainPadding	number \| number[] \| { x: number[], y: number[] }		The 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. @example [left, right], { x: [left, right], y: [bottom, top] } {x: [10, -10], y: 5}
eventKey	number \| string \| Function		Similar to data accessor props `x` and `y`, this prop may be used to functionally assign eventKeys to data
events	object[]		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 VictoryBar 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: "thisOne", eventHandlers: { onClick: () => { return [ { eventKey: "theOtherOne", mutation: (props) => { return {style: merge({}, props.style, {fill: "orange"})}; } }, { eventKey: "theOtherOne", target: "labels", mutation: () => { return {text: "hey"}; } } ]; } } } ]}
externalEventMutations	object[]		ChartBar uses the standard externalEventMutations prop.
groupComponent	React.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
height	number		The height props specifies the height the svg viewBox of the chart container. This value should be given as a number of pixels
horizontal	boolean		The horizontal prop determines whether the bars will be laid vertically or horizontally. The bars will be vertical if this prop is false or unspecified, or horizontal if the prop is set to true.
labelComponent	React.ReactElement<any>		The labelComponent prop takes in an entire label component which will be used to create a label for the bar. 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 ChartBar. If individual labels are required for each data point, they should be created by composing ChartBar with VictoryScatter
labels	string[] \| number[] \| ((data: any) => string \| number \| null)		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
maxDomain	number \| { 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. @example maxDomain={0} maxDomain={{ y: 0 }}
minDomain	number \| { 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. @example minDomain={0} minDomain={{ y: 0 }}
name	string		The name prop is used to reference a component instance when defining shared events.
origin	{ x: number, y: number }		Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts. Note: It will not typically be necessary to set an origin prop manually
padding	number \| { top: number, bottom: number, left: number, right: number }		The 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[] \| { x: number[], y: 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 or ChartGroup will have no effect. This prop is usually not set manually. @example [low, high] \| { x: [low, high], y: [low, high] } Cartesian: range={{ x: [50, 250], y: [50, 250] }} Polar: range={{ x: [0, 360], y: [0, 250] }}
samples	number		The 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.
scale	string \| { x: string, y: string }		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"}
singleQuadrantDomainPadding	boolean \| { 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. @example singleQuadrantDomainPadding={false} singleQuadrantDomainPadding={{ x: false }}
sortKey	number \| string \| Function \| string[]		Use 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	string		The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order.
standalone	boolean		The 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 ChartBar with other components within an enclosing <svg> tag.
style	{ parent: object, data: object, labels: object }		The style prop specifies styles for your ChartBar. 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}}
theme	object	getTheme(themeColor)	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 ChartBar as a solo component, implement the theme directly on ChartBar. If you are wrapping ChartBar in ChartChart or ChartGroup, please call the theme on the outermost wrapper component instead.
themeColor	string		Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
Deprecated: themeVariant	string		Specifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop Use PatternFly's pf-theme-dark CSS selector
width	number		The width props specifies the width of the svg viewBox of the chart container This value should be given as a number of pixels
x	number \| string \| Function \| string[]		The 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)
y	number \| string \| Function \| string[]		The 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)
y0	number \| string \| Function \| string[]		Use 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. This prop may be given in a variety of formats. @example 'last_quarter_profit', () => 10, 1, 'employees.salary', ["employees", "salary"]

ChartDonut

ChartDonut renders a dataset as a donut chart. See https://github.com/FormidableLabs/victory/blob/main/packages/victory-pie/src/index.d.ts
*required
Name	Type	Default	Description
allowTooltip	boolean	true	Specifies 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.
animate	boolean \| object		The 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})})}
ariaDesc	string		The ariaDesc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. Note: Overridden by the desc prop of containerComponent
ariaTitle	string		The 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
capHeight	number \| string \| Function	1.1	The capHeight prop defines a text metric for the font being used: the expected height of capital letters. This is necessary because of SVG, which (a) positions the bottom of the text at `y`, and (b) has no notion of line height. The value should ideally use the same units as `lineHeight` and `dy`, preferably ems. If given a unitless number, it is assumed to be ems.
categories	string[] \| { x: string[], y: string[] }		The 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"]
colorScale	string[]		The colorScale prop is an optional prop that defines the color scale the pie 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. ChartDonut will automatically assign values from this color scale to the pie slices unless colors are explicitly provided in the data object
constrainToVisibleArea	boolean		The 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.
containerComponent	React.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 ChartDonut: 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, ChartDonut will use the default ChartContainer component. @example <ChartContainer title="Chart of Dog Breeds" desc="This chart shows ..." />
cornerRadius	number \| Function		Set the cornerRadius for every dataComponent (Slice by default) within ChartDonut
data	any[]		The data prop specifies the data to be plotted, where data X-value is the slice label (string or number), and Y-value is the corresponding number value represented by the slice Data should be in the form of an array of data points. 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}]]
dataComponent	React.ReactElement<any>		The dataComponent prop takes an entire, HTML-complete data component which will be used to create slices for each datum in the pie chart. The new element created from the passed dataComponent will have the property datum set by the pie chart for the point it renders; properties style and pathFunction calculated by ChartDonut; an index property set corresponding to the location of the datum in the data provided to the pie; events bound to the ChartDonut; and the d3 compatible slice object. If a dataComponent is not provided, ChartDonut's Slice component will be used.
endAngle	number		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.
eventKey	number \| string \| Function		Similar to data accessor props `x` and `y`, this prop may be used to functionally assign eventKeys to data
events	object[]		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 ChartDonut 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"}; } } ]; } } } ]}
externalEventMutations	object[]		ChartDonut uses the standard externalEventMutations prop.
groupComponent	React.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
hasPatternsBeta	boolean \| boolean[]		The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart. SVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected color theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar to the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized patterns would be displayed in that same order. Create custom patterns via the patternScale prop. Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. @example hasPatterns={ true } @example hasPatterns={[ true, true, false ]}
height	number	theme.pie.height	Specifies 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. Note: When adding a legend, height (the overall SVG height) may need to be larger than donutHeight (the donut size) in order to accommodate the extra legend. By default, donutHeight is the min. of either height or width. This covers most use cases in order to accommodate legends within the same SVG. However, donutHeight (not height) may need to be set in order to adjust the donut height. Typically, the parent container is set to the same width in order to maintain the aspect ratio.
innerRadius	number \| Function		When creating a donut chart, this prop determines the number of pixels between the center of the chart and the inner edge.
labelComponent	React.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 ChartDonut. If individual labels are required for each data point, they should be created by composing ChartDonut with VictoryScatter
labelPosition	string \| Function		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	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.
labels	string[] \| number[] \| ((data: any) => string \| number \| null)		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
legendAllowWrap	boolean		Allows legend items to wrap. A value of true allows the legend to wrap onto the next line if its container is not wide enough. Note: This is overridden by the legendItemsPerRow property
legendComponent	React.ReactElement<any>		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'		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.
legendPosition	'bottom' \| 'right'	ChartCommonStyles.legend.position	The legend position relation to the donut chart. Valid values are 'bottom' 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.
name	string		The name prop is typically used to reference a component instance when defining shared events. However, this optional prop may also be applied to child elements as an ID prefix. This is a workaround to ensure Victory based components output unique IDs when multiple charts appear in a page.
origin	{ x: number, y: number }		Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts. Note: It will not typically be necessary to set an origin prop manually
padAngle	number \| Function		The padAngle prop determines the amount of separation between adjacent data slices in number of degrees
padding	number \| { top: number, bottom: number, left: number, right: number }		The 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.
patternScaleBeta	string[]		The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be given as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there are more children than patterns in the provided patternScale. Use null to omit the pattern for a given index. Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]}
radius	number \| Function		Specifies the radius of the chart. If this property is not provided it is computed from width, height, and padding props
sortKey	number \| string \| Function \| string[]		Use 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	string		The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order.
standalone	boolean	true	The 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 ChartDonut with other components within an enclosing <svg> tag.
startAngle	number		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.
style	{ parent: object, data: object, labels: object }		The style prop specifies styles for your pie. ChartDonut 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}}
subTitle	string		The subtitle for the donut chart
subTitleComponent	React.ReactElement<any>		The label component to render the chart subTitle. When overriding the subTitleComponent prop, title and subTitle will be centered independently. You may choose to use the x and y props of ChartLabel to adjust the center position. For example: <pre> subTitle="Pets" subTitleComponent={<ChartLabel y={130} />} title={100} titleComponent={<ChartLabel y={107} />} </pre> Note: Default label properties may be applied
subTitlePosition	'bottom' \| 'center' \| 'right'	ChartDonutStyles.label.subTitlePosition	The orientation of the subtitle position. Valid values are 'bottom', 'center', and 'right'
theme	object	getDonutTheme(themeColor)	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 ChartDonut as a solo component, implement the theme directly on ChartDonut. If you are wrapping ChartDonut in ChartChart or ChartGroup, please call the theme on the outermost wrapper component instead.
themeColor	string		Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
Deprecated: themeVariant	string		Specifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop Use PatternFly's pf-theme-dark CSS selector
title	string		The title for the donut chart
titleComponent	React.ReactElement<any>	<ChartLabel />	The label component to render the chart title. When centering both title and subTitle props, it's possible to override both styles via an array provided to ChartLabel. The first item in the array is associated with title styles, while the second item in the array is associated with subtitle styles. <pre> subTitle="Pets" title={100} titleComponent={ <ChartLabel style={[{ fill: 'red', // title color fontSize: 24 }, { fill: 'blue', // subtitle color fontSize: 14 }]} /> } </pre> In this case, both title and subTitle will be centered together. However, should you also override the subTitleComponent prop, title and subTitle will be centered independently. You may choose to use the x and y props of ChartLabel to adjust the center position. For example: <pre> subTitle="Pets" subTitleComponent={<ChartLabel y={130} />} title={100} titleComponent={<ChartLabel y={107} />} </pre> Note: Default label properties may be applied
width	number	theme.pie.width	Specifies 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.
x	number \| string \| Function \| string[]		The 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)
y	number \| string \| Function \| string[]		The 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)

ChartDonutThreshold

ChartDonutThreshold renders a dataset as a donut threshold chart. See https://github.com/FormidableLabs/victory/blob/main/packages/victory-pie/src/index.d.ts
*required
Name	Type	Default	Description
allowTooltip	boolean	true	Specifies 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.
animate	boolean \| object		The 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})})}
ariaDesc	string		The ariaDesc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. Note: Overridden by the desc prop of containerComponent
ariaTitle	string		The 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
categories	string[] \| { x: string[], y: string[] }		The 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"]
colorScale	string[]		The colorScale prop is an optional prop that defines the color scale the pie 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. ChartDonutThreshold will automatically assign values from this color scale to the pie slices unless colors are explicitly provided in the data object
constrainToVisibleArea	boolean	false	The 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.
containerComponent	React.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 ChartDonutThreshold: 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, ChartDonutThreshold will use the default ChartContainer component. @example <ChartContainer title="Chart of Dog Breeds" desc="This chart shows ..." />
cornerRadius	number \| Function		Set the cornerRadius for every dataComponent (Slice by default) within ChartDonutThreshold
data	any[]	[]	The data prop specifies the data to be plotted, where data X-value is the slice label (string or number), and Y-value is the corresponding number value represented by the slice Data should be in the form of a single data point. The 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. Note: The Y-value is expected to represent a percentage @example data={[{ x: 'Warning at 60%', y: 60 }, { x: 'Danger at 90%', y: 90 }]}
dataComponent	React.ReactElement<any>		The dataComponent prop takes an entire, HTML-complete data component which will be used to create slices for each datum in the pie chart. The new element created from the passed dataComponent will have the property datum set by the pie chart for the point it renders; properties style and pathFunction calculated by ChartDonutThreshold; an index property set corresponding to the location of the datum in the data provided to the pie; events bound to the ChartDonutThreshold; and the d3 compatible slice object. If a dataComponent is not provided, ChartDonutThreshold's Slice component will be used.
desc	string		The desc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. The more info about the chart provided in the description, the more usable it will be for people using screen readers. This prop defaults to an empty string. Note: Overridden by containerComponent @example "Golden retreivers make up 30%, Labs make up 25%, and other dog breeds are not represented above 5% each."
endAngle	number		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.
eventKey	number \| string \| Function		Similar to data accessor props `x` and `y`, this prop may be used to functionally assign eventKeys to data
events	object[]		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 ChartDonutThreshold 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"}; } } ]; } } } ]}
externalEventMutations	object[]		ChartDonutThreshold uses the standard externalEventMutations prop.
groupComponent	React.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
hasPatternsBeta	boolean \| boolean[]		The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart. SVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected color theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar to the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized patterns would be displayed in that same order. Create custom patterns via the patternScale prop. Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. @example hasPatterns={ true } @example hasPatterns={[ true, true, false ]}
height	number	theme.pie.height	Specifies 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 height in order to maintain the aspect ratio.
innerRadius	number \| Function		When creating a donut chart, this prop determines the number of pixels between the center of the chart and the inner edge.
invert	boolean	false	Invert the threshold color scale used to represent warnings, errors, etc.
labelRadius	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.
labels	string[] \| number[] \| ((data: any) => string \| number \| null)	[]	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
name	string		The name prop is typically used to reference a component instance when defining shared events. However, this optional prop may also be applied to child elements as an ID prefix. This is a workaround to ensure Victory based components output unique IDs when multiple charts appear in a page.
origin	{ x: number, y: number }		Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts. Note: It will not typically be necessary to set an origin prop manually
padAngle	number \| Function		The padAngle prop determines the amount of separation between adjacent data slices in number of degrees
padding	number \| { top: number, bottom: number, left: number, right: number }		The 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.
patternScaleBeta	string[]		The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be given as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there are more children than patterns in the provided patternScale. Use null to omit the pattern for a given index. Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]}
radius	number \| Function		Specifies the radius of the chart. If this property is not provided it is computed from width, height, and padding props
sortKey	number \| string \| Function \| string[]		Use 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	string		The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order.
standalone	boolean	true	The 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 ChartDonutThreshold with other components within an enclosing <svg> tag.
startAngle	number		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.
style	{ parent: object, data: object, labels: object }		The style prop specifies styles for your pie. ChartDonutThreshold 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}}
subTitle	string		The subtitle for the donut chart
subTitlePosition	'bottom' \| 'center' \| 'right'	ChartDonutStyles.label.subTitlePosition	The orientation of the subtitle position. Valid values are 'bottom', 'center', and 'right'
theme	object	getDonutThresholdStaticTheme(themeColor, invert)	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 ChartDonutThreshold as a solo component, implement the theme directly on ChartDonutThreshold. If you are wrapping ChartDonutThreshold in ChartChart or ChartGroup, please call the theme on the outermost wrapper component instead.
Deprecated: themeVariant	string		Specifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop Use PatternFly's pf-theme-dark CSS selector
title	string		The title for the donut chart
width	number	theme.pie.width	Specifies 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.
x	number \| string \| Function \| string[]		The 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)
y	number \| string \| Function \| string[]		The 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)

ChartDonutUtilization

ChartDonutUtilization renders a dataset as a donut utilization chart. See https://github.com/FormidableLabs/victory/blob/main/packages/victory-pie/src/index.d.ts
*required
Name	Type	Default	Description
allowTooltip	boolean	true	Specifies 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.
animate	boolean \| object		The 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})})}
ariaDesc	string		The ariaDesc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. Note: Overridden by the desc prop of containerComponent
ariaTitle	string		The 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
capHeight	number \| string \| Function		The capHeight prop defines a text metric for the font being used: the expected height of capital letters. This is necessary because of SVG, which (a) positions the bottom of the text at `y`, and (b) has no notion of line height. The value should ideally use the same units as `lineHeight` and `dy`, preferably ems. If given a unitless number, it is assumed to be ems.
categories	string[] \| { x: string[], y: string[] }		The 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"]
colorScale	string[]		The colorScale prop is an optional prop that defines the color scale the pie 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. ChartDonutUtilization will automatically assign values from this color scale to the pie slices unless colors are explicitly provided in the data object
constrainToVisibleArea	boolean		The 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.
containerComponent	React.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 ChartDonutUtilization: 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, ChartDonutUtilization will use the default ChartContainer component. @example <ChartContainer title="Chart of Dog Breeds" desc="This chart shows ..." />
cornerRadius	number \| Function		Set the cornerRadius for every dataComponent (Slice by default) within ChartDonutUtilization
data	any		The data prop specifies the data to be plotted, where data X-value is the slice label (string or number), and Y-value is the corresponding number value represented by the slice Data should be in the form of a single data point. The 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. Note: The Y-value is expected to represent a percentage @example data={{ x: 'GBps capacity', y: 75 }}
dataComponent	React.ReactElement<any>		The dataComponent prop takes an entire, HTML-complete data component which will be used to create slices for each datum in the pie chart. The new element created from the passed dataComponent will have the property datum set by the pie chart for the point it renders; properties style and pathFunction calculated by ChartDonutUtilization; an index property set corresponding to the location of the datum in the data provided to the pie; events bound to the ChartDonutUtilization; and the d3 compatible slice object. If a dataComponent is not provided, ChartDonutUtilization's Slice component will be used.
desc	string		The desc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. The more info about the chart provided in the description, the more usable it will be for people using screen readers. This prop defaults to an empty string. Note: Overridden by containerComponent @example "Golden retreivers make up 30%, Labs make up 25%, and other dog breeds are not represented above 5% each."
endAngle	number		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.
eventKey	number \| string \| Function		Similar to data accessor props `x` and `y`, this prop may be used to functionally assign eventKeys to data
events	object[]		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 ChartDonutUtilization 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"}; } } ]; } } } ]}
externalEventMutations	object[]		ChartDonutUtilization uses the standard externalEventMutations prop.
groupComponent	React.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
hasPatternsBeta	boolean \| boolean[]		The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart. SVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected color theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar to the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized patterns would be displayed in that same order. Create custom patterns via the patternScale prop. Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. @example hasPatterns={ true } @example hasPatterns={[ true, true, false ]}
height	number	theme.pie.height	Specifies 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.
innerRadius	number \| Function		When creating a donut chart, this prop determines the number of pixels between the center of the chart and the inner edge.
invert	boolean	false	Invert the threshold color scale used to represent warnings, errors, etc. Instead of showing a warning at 60% and an error at 90%; for example, this would allow users to show a warning below 60% and an error below 20%
labelComponent	React.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 ChartDonutUtilization. If individual labels are required for each data point, they should be created by composing ChartDonutUtilization with VictoryScatter
labelPosition	string \| Function		The labelPosition prop specifies the angular 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.
labelRadius	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.
labels	string[] \| number[] \| ((data: any) => string \| number \| null)		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
legendAllowWrap	boolean		Allows legend items to wrap. A value of true allows the legend to wrap onto the next line if its container is not wide enough. Note: This is overridden by the legendItemsPerRow property
legendComponent	React.ReactElement<any>		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'		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.
legendPosition	'bottom' \| 'right'	ChartCommonStyles.legend.position	The legend position relation to the donut chart. Valid values are 'bottom' 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.
name	string		The name prop is typically used to reference a component instance when defining shared events. However, this optional prop may also be applied to child elements as an ID prefix. This is a workaround to ensure Victory based components output unique IDs when multiple charts appear in a page.
origin	{ x: number, y: number }		Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts. Note: It will not typically be necessary to set an origin prop manually
padAngle	number \| Function		The padAngle prop determines the amount of separation between adjacent data slices in number of degrees
padding	number \| { top: number, bottom: number, left: number, right: number }		The 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.
patternScaleBeta	string[]		The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be given as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there are more children than patterns in the provided patternScale. Use null to omit the pattern for a given index. Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]}
radius	number \| Function		Specifies the radius of the chart. If this property is not provided it is computed from width, height, and padding props
sortKey	number \| string \| Function \| string[]		Use 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	string		The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order.
standalone	boolean	true	The 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 ChartDonutUtilization with other components within an enclosing <svg> tag.
startAngle	number		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.
style	{ parent: object, data: object, labels: object }		The style prop specifies styles for your pie. ChartDonutUtilization 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}}
subTitle	string		The subtitle for the donut chart label
subTitleComponent	React.ReactElement<any>		The label component to render the chart subTitle. When overriding the subTitleComponent prop, title and subTitle will be centered independently. You may choose to use the x and y props of ChartLabel to adjust the center position. For example: <pre> subTitle="Pets" subTitleComponent={<ChartLabel y={130} />} title={100} titleComponent={<ChartLabel y={107} />} </pre> Note: Default label properties may be applied
subTitlePosition	'bottom' \| 'center' \| 'right'		The orientation of the subtitle position. Valid values are 'bottom', 'center', and 'right'
theme	object	getDonutUtilizationTheme(themeColor)	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 ChartDonutUtilization as a solo component, implement the theme directly on ChartDonutUtilization. If you are wrapping ChartDonutUtilization in ChartChart, ChartGroup, or ChartThreshold please call the theme on the outermost wrapper component instead.
themeColor	string		Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
Deprecated: themeVariant	string		Specifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop Use PatternFly's pf-theme-dark CSS selector
thresholds	any[]		The dynamic portion of the chart will change colors when data reaches the given threshold. Colors may be overridden, but defaults shall be provided. @example thresholds={[{ value: 60, color: '#F0AB00' }, { value: 90, color: '#C9190B' }]}
title	string		The title for the donut chart label
titleComponent	React.ReactElement<any>		The label component to render the donut chart title. When centering both title and subTitle props, it's possible to override both styles via an array provided to ChartLabel. The first item in the array is associated with title styles, while the second item in the array is associated with subtitle styles. <pre> subTitle="Pets" title={100} titleComponent={ <ChartLabel style={[{ fill: 'red', // title color fontSize: 24 }, { fill: 'blue', // subtitle color fontSize: 14 }]} /> } </pre> In this case, both title and subTitle will be centered together. However, should you also override the subTitleComponent prop, title and subTitle will be centered independently. You may choose to use the x and y props of ChartLabel to adjust the center position. For example: <pre> subTitle="Pets" subTitleComponent={<ChartLabel y={130} />} title={100} titleComponent={<ChartLabel y={107} />} </pre> Note: Default label properties may be applied
width	number	theme.pie.width	Specifies 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.
x	number \| string \| Function \| string[]		The 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)
y	number \| string \| Function \| string[]		The 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)

ChartGroup

ChartGroup is a wrapper component that renders a given set of children with some shared props. ChartGroup reconciles the domain and layout for all its children, and coordinates animations and shared events. ChartGroup may also be used to supply common data and styles to all its children. This is especially useful when adding markers to a line, or adding voronoi tooltips to data. ChartGroup may also be used to apply an offset to a group of children, as with grouped bar charts, or may be used to stack several components on the same level, e.g., stacked area charts with data markers. See https://github.com/FormidableLabs/victory/blob/main/packages/victory-group/src/index.d.ts
*required
Name	Type	Default	Description
animate	boolean \| object		The 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})})}
ariaDesc	string		The ariaDesc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. Note: Overridden by the desc prop of containerComponent
ariaTitle	string		The 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
categories	string[] \| { x: string[], y: string[] }		The 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"]
children	React.ReactNode \| React.ReactNode[]		The children to render with the chart
color	string		The 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.
colorScale	string[]		The 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.
containerComponent	React.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 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..." />
data	any[]		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}]]
domain	number[] \| { x: number[], y: number[] }		The 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 [low, high], { x: [low, high], y: [low, high] } [-1, 1], {x: [0, 100], y: [0, 1]}
domainPadding	number \| number[] \| { x: number[], y: number[] }		The 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. @example [left, right], { x: [left, right], y: [bottom, top] } {x: [10, -10], y: 5}
eventKey	number \| string \| Function		Similar to data accessor props `x` and `y`, this prop may be used to functionally assign eventKeys to data
events	object[]		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"}; } } ]; } } } ]}
externalEventMutations	object[]		ChartGroup uses the standard externalEventMutations prop.
groupComponent	React.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
hasPatternsBeta	boolean \| boolean[]		The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart. SVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected color theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar to the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized patterns would be displayed in that same order. Create custom patterns via the patternScale prop. Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. @example hasPatterns={ true } @example hasPatterns={[ true, true, false ]}
height	number		The height props specifies the height the svg viewBox of the chart container. This value should be given as a number of pixels
horizontal	boolean		The 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.
labelComponent	React.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
labels	string[] \| number[] \| ((data: any) => string \| number \| null)		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
maxDomain	number \| { 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. @example maxDomain={0} maxDomain={{ y: 0 }}
minDomain	number \| { 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. @example minDomain={0} minDomain={{ y: 0 }}
name	string		The name prop is used to reference a component instance when defining shared events.
offset	number		The 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. Note: It will not typically be necessary to set an origin prop manually
padding	number \| { top: number, bottom: number, left: number, right: number }		The 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.
patternScaleBeta	string[]		The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be given as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there are more children than patterns in the provided patternScale. Use null to omit the pattern for a given index. Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]}
polar	boolean		Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart.
range	number[] \| { x: number[], y: 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. @example [low, high] \| { x: [low, high], y: [low, high] } Cartesian: range={{ x: [50, 250], y: [50, 250] }} Polar: range={{ x: [0, 360], y: [0, 250] }}
samples	number		The 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.
scale	string \| { x: string, y: string }		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"}
singleQuadrantDomainPadding	boolean \| { 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. @example singleQuadrantDomainPadding={false} singleQuadrantDomainPadding={{ x: false }}
sortKey	number \| string \| Function \| string[]		Use 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	string		The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order.
standalone	boolean		The 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.
style	{ parent: object, data: object, labels: object }		The 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}}
theme	object	getTheme(themeColor)	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.
themeColor	string		Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
Deprecated: themeVariant	string		Specifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop Use PatternFly's pf-theme-dark CSS selector
width	number		The width props specifies the width of the svg viewBox of the chart container This value should be given as a number of pixels
x	number \| string \| Function \| string[]		The 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)
y	number \| string \| Function \| string[]		The 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)
y0	number \| string \| Function \| string[]		Use 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

ChartLegend renders a chart legend component. See https://github.com/FormidableLabs/victory/blob/main/packages/victory-legend/src/index.d.ts
*required
Name	Type	Default	Description
borderComponent	React.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.
borderPadding	number \| { top: number, bottom: number, left: number, right: number }		The 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.
centerTitle	boolean		The centerTitle boolean prop specifies whether a legend title should be centered.
colorScale	string[]		The 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. Colors will repeat when there are more symbols than colors in the provided colorScale.
containerComponent	React.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; labels?: { fill?: 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.
dataComponent	React.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.
eventKey	number \| string \| Function \| string[]		ChartLegend uses the standard eventKey prop to specify how event targets are addressed. This prop is not commonly used.
events	object[]		ChartLegend uses the standard events prop.
externalEventMutations	object[]		ChartLegend uses the standard externalEventMutations prop.
groupComponent	React.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
gutter	number \| { 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.
itemsPerRow	number		The 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.
labelComponent	React.ReactElement<any>	<ChartLabel />	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.
name	string		The name prop is typically used to reference a component instance when defining shared events. However, this optional prop may also be applied to child elements as an ID prefix. This is a workaround to ensure Victory based components output unique IDs when multiple charts appear in a page.
orientation	string		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.
padding	number \| { top: number, bottom: number, left: number, right: number }		The 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.
patternScaleBeta	string[]		The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be given as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there are more children than patterns in the provided patternScale. Use null to omit the pattern for a given index. Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]}
responsive	boolean	true	The 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
rowGutter	number \| { top: number, bottom: number }		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. @example { top: 0, bottom: 10 }
standalone	boolean		The 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.
style	{ border: object, data: object, labels: object, parent: object, title: object }		The 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}}
symbolSpacer	number		The symbolSpacer prop defines the number of pixels between data components and label components.
theme	object	getTheme(themeColor)	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.
themeColor	string		Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
Deprecated: themeVariant	string		Specifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop Use PatternFly's pf-theme-dark CSS selector
title	string \| 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.
titleComponent	React.ReactElement<any>	<ChartLabel />	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 label component 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.
titleOrientation	string		The titleOrientation prop specifies where the title should be rendered in relation to the rest of the legend. Possible values for this prop are “top”, “bottom”, “left”, and “right”.
width	number		Specifies 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.
x	number		The x and y props define the base position of the legend element.
y	number		The x and y props define the base position of the legend element.

ChartLegendTooltip

The ChartLegendTooltip is based on ChartCursorTooltip, which is intended to be used with a voronoi cursor container. This works best with charts such as area and line, for example. See https://github.com/FormidableLabs/victory/blob/main/packages/victory-tooltip/src/index.d.ts
*required
Name	Type	Default	Description
activateData	boolean		When true, tooltip events will set the active prop on both data and label elements.
active	boolean		The active prop specifies whether the tooltip component should be displayed.
angle	string \| number		The angle prop specifies the angle to rotate the tooltip around its origin point.
center	{ x: number; y: number }	{ x: 0, y: 0 }	The center prop determines the position of the center of the tooltip flyout. This prop should be given as an object that describes the desired x and y svg coordinates of the center of the tooltip. This prop is useful for positioning the flyout of a tooltip independent from the pointer. When ChartTooltip is used with ChartVoronoiContainer, the center prop is what enables the mouseFollowTooltips option. When this prop is set, non-zero pointerLength values will no longer be respected.
centerOffset	{ x: number \| Function, y: number \| Function }		The centerOffset prop determines the position of the center of the tooltip flyout in relation to the flyout pointer. This prop should be given as an object of x and y, where each is either a numeric offset value or a function that returns a numeric value. When this prop is set, non-zero pointerLength values will no longer be respected.
constrainToVisibleArea	boolean		The 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.
cornerRadius	number \| Function		The cornerRadius prop determines corner radius of the flyout container. This prop may be given as a positive number or a function of datum.
data	any[]		Victory components can pass a data prop to their label component. This can be useful in custom components that need to make use of the entire dataset.
datum	{}		Victory components can pass a datum prop to their label component. This can be used to calculate functional styles, and determine text.
dx	number \| Function		The dx prop defines a horizontal shift from the x coordinate.
dy	number \| Function		The dy prop defines a vertical shift from the y coordinate.
events	object		The events prop attaches arbitrary event handlers to the label component. This prop should be given as an object of event names and corresponding event handlers. When events are provided via Victory’s event system, event handlers will be called with the event, the props of the component is attached to, and an eventKey. @example events={{onClick: (evt) => alert("x: " + evt.clientX)}}
flyoutComponent	React.ReactElement<any>		The flyoutComponent prop takes a component instance which will be used to create the flyout path for each tooltip. The new element created from the passed flyoutComponent will be supplied with the following properties: x, y, dx, dy, index, datum, cornerRadius, pointerLength, pointerWidth, width, height, orientation, 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 flyoutComponent is omitted, a default Flyout component will be created with props described above. @example flyoutComponent={<Flyout x={50} y={50}/>}, flyoutComponent={<MyCustomFlyout/>}
flyoutHeight	number \| Function		The flyoutHeight prop defines the height of the tooltip flyout. This prop may be given as a positive number or a function of datum. If this prop is not set, height will be determined based on an approximate text size calculated from the text and style props provided to ChartTooltip.
flyoutStyle	number \| Function		The style prop applies SVG style properties to the rendered flyout container. These props will be passed to the flyoutComponent.
flyoutWidth	number \| Function		The flyoutWidth prop defines the width of the tooltip flyout. This prop may be given as a positive number or a function of datum. If this prop is not set, flyoutWidth will be determined based on an approximate text size calculated from the text and style props provided to VictoryTooltip.
groupComponent	React.ReactElement<any>		The groupComponent prop takes a component instance which will be used to create group elements for use within container elements. This prop defaults to a <g> tag.}
horizontal	boolean		The horizontal prop determines whether to plot the flyouts to the left / right of the (x, y) coordinate rather than top / bottom. This is useful when an orientation prop is not provided, and data will determine the default orientation. i.e. negative values result in a left orientation and positive values will result in a right orientation by default.
index	number \| string		The index prop represents the index of the datum in the data array.
isCursorTooltip	boolean	true	The ChartLegendTooltip is based on ChartCursorTooltip, which is intended to be used with a voronoi cursor container. When isCursorTooltip is true (default), ChartCursorTooltip is used. If false, ChartTooltip is used.
labelComponent	React.ReactElement<any>	<ChartLegendTooltipContent />	The labelComponent prop takes a component instance which will be used to render each tooltip label. The new element created from the passed labelComponent will be supplied with the following properties: x, y, index, 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. @example labelComponent={<ChartLabel dy={20}/>}, labelComponent={<MyCustomLabel/>}
labelTextAnchor	string \| Function		Defines how the labelComponent text is horizontally positioned relative to its `x` and `y` coordinates. Valid values are 'start', 'middle', 'end', and 'inherit'.
legendData	{ childName?: string; name?: string; labels?: { fill?: 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 childName is used to sync the data series associated with the given chart child name. The data prop must be given as an array. @example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]} legendData={[{ childName: `cats`, name: `Total cats` }, { childName: `dogs`, name: 'Total dogs' }]}
orientation	string \| Function		The orientation prop determines which side of the (x, y) coordinate the tooltip should be rendered on. This prop can be given as “top”, “bottom”, “left”, “right”, or as a function of datum that returns one of these values. If this prop is not provided it will be determined from the sign of the datum, and the value of the horizontal prop.
patternScaleBeta	string[]		The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be given as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there are more children than patterns in the provided patternScale. Use null to omit the pattern for a given index. Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]}
pointerLength	number \| Function		The pointerLength prop determines the length of the triangular pointer extending from the flyout. This prop may be given as a positive number or a function of datum.
pointerOrientation	string \| Function		This prop determines which side of the tooltip flyout the pointer should originate on. When this prop is not set, it will be determined based on the overall orientation of the flyout in relation to its data point, and any center or centerOffset values. Valid values are 'top', 'bottom', 'left' and 'right.
pointerWidth	number \| Function		The pointerWidth prop determines the width of the base of the triangular pointer extending from the flyout. This prop may be given as a positive number or a function of datum.
renderInPortal	boolean		When renderInPortal is true, rendered tooltips will be wrapped in VictoryPortal and rendered within the Portal element within ChartContainer. Note: This prop should not be set to true when using a custom container element.
style	React.CSSProperties \| React.CSSProperties[]		The style prop applies CSS properties to the rendered `<text>` element.
text	number \| string \| Function \| string[] \| number[]		The text prop defines the text ChartTooltip will render. The text prop may be given as a string, number, or function of datum. When ChartLabel is used as the labelComponent, strings may include newline characters, which ChartLabel will split in to separate <tspan/> elements.
theme	object	getTheme(themeColor)	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. Note: Theme may be overridden when flyout is rendered
themeColor	string		Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
Deprecated: themeVariant	string		Specifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop Use PatternFly's pf-theme-dark CSS selector
title	string \| string[] \| Function		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. Example: title={(datum) => datum.x}
x	number		The x prop defines the x coordinate to use as a basis for horizontal positioning.
y	number		The y prop defines the y coordinate to use as a basis for vertical positioning.

ChartPie

ChartPie renders a dataset as a pie chart. See https://github.com/FormidableLabs/victory/blob/main/packages/victory-pie/src/index.d.ts
*required
Name	Type	Default	Description
allowTooltip	boolean	true	Specifies 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.
animate	boolean \| object		The 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})})}
ariaDesc	string		The ariaDesc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. Note: Overridden by the desc prop of containerComponent
ariaTitle	string		The 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
categories	string[] \| { x: string[], y: string[] }		The 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"]
colorScale	string[]		The colorScale prop is an optional prop that defines the color scale the pie 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. ChartPie will automatically assign values from this color scale to the pie slices unless colors are explicitly provided in the data object
constrainToVisibleArea	boolean	false	The 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.
containerComponent	React.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 ChartPie: 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, ChartPie will use the default ChartContainer component. @example <ChartContainer title="Chart of Dog Breeds" desc="This chart shows ..." />
cornerRadius	number \| Function		Set the cornerRadius for every dataComponent (Slice by default) within ChartPie
data	any[]		The data prop specifies the data to be plotted, where data X-value is the slice label (string or number), and Y-value is the corresponding number value represented by the slice Data should be in the form of an array of data points. 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}]]
dataComponent	React.ReactElement<any>		The dataComponent prop takes an entire, HTML-complete data component which will be used to create slices for each datum in the pie chart. The new element created from the passed dataComponent will have the property datum set by the pie chart for the point it renders; properties style and pathFunction calculated by ChartPie; an index property set corresponding to the location of the datum in the data provided to the pie; events bound to the ChartPie; and the d3 compatible slice object. If a dataComponent is not provided, ChartPie's Slice component will be used.
endAngle	number		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.
eventKey	number \| string \| Function		Similar to data accessor props `x` and `y`, this prop may be used to functionally assign eventKeys to data
events	object[]		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"}; } } ]; } } } ]}
externalEventMutations	object[]		ChartPie uses the standard externalEventMutations prop.
groupComponent	React.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
hasPatternsBeta	boolean \| boolean[]		The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart. SVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected color theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar to the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized patterns would be displayed in that same order. Create custom patterns via the patternScale prop. Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. @example hasPatterns={ true } @example hasPatterns={[ true, true, false ]}
height	number	theme.pie.height	Specifies 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. Note: When adding a legend, height (the overall SVG height) may need to be larger than pieHeight (the pie size) in order to accommodate the extra legend. By default, pieHeight is the min. of either height or width. This covers most use cases in order to accommodate legends within the same SVG. However, pieHeight (not height) may need to be set in order to adjust the pie height. Typically, the parent container is set to the same width in order to maintain the aspect ratio.
innerRadius	number \| Function		When creating a donut chart, this prop determines the number of pixels between the center of the chart and the inner edge. When this prop is set to zero a regular pie chart is rendered.
labelComponent	React.ReactElement<any>	allowTooltip ? ( <ChartTooltip constrainToVisibleArea={constrainToVisibleArea} theme={theme} /> ) : ( undefined )	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 ChartPie. If individual labels are required for each data point, they should be created by composing ChartPie with VictoryScatter
labelPosition	string \| Function		The labelPosition prop specifies the angular 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.
labelRadius	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.
labels	string[] \| number[] \| ((data: any) => string \| number \| null)		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
legendAllowWrap	boolean	false	Allows legend items to wrap. A value of true allows the legend to wrap onto the next line if its container is not wide enough. Note: This is overridden by the legendItemsPerRow property
legendComponent	React.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	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.
legendPosition	'bottom' \| 'right'	ChartCommonStyles.legend.position	The legend position relation to the pie chart. Valid values are 'bottom' 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.
name	string		The name prop is typically used to reference a component instance when defining shared events. However, this optional prop may also be applied to child elements as an ID prefix. This is a workaround to ensure Victory based components output unique IDs when multiple charts appear in a page.
origin	{ x: number, y: number }		Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts. Note: It will not typically be necessary to set an origin prop manually
padAngle	number \| Function		The padAngle prop determines the amount of separation between adjacent data slices in number of degrees
padding	number \| { top: number, bottom: number, left: number, right: number }		The 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.
patternScaleBeta	string[]		The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be given as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there are more children than patterns in the provided patternScale. Use null to omit the pattern for a given index. Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]}
radius	number \| Function		Specifies the radius of the chart. If this property is not provided it is computed from width, height, and padding props
sortKey	number \| string \| Function \| string[]		Use 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	string		The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order.
standalone	boolean	true	The 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 ChartPie with other components within an enclosing <svg> tag.
startAngle	number		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.
style	{ parent: object, data: object, labels: object }		The style prop specifies styles for your pie. ChartPie 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}}
theme	object	getTheme(themeColor)	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 ChartPie as a solo component, implement the theme directly on ChartPie. If you are wrapping ChartPie in ChartChart or ChartGroup, please call the theme on the outermost wrapper component instead.
themeColor	string		Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
Deprecated: themeVariant	string		Specifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop Use PatternFly's pf-theme-dark CSS selector
width	number	theme.pie.width	Specifies 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.
x	number \| string \| Function \| string[]		The 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)
y	number \| string \| Function \| string[]		The 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)

ChartScatter

ChartScatter renders a dataset as a series of points. ChartScatter can be composed with Chart to create scatter plots. See https://github.com/FormidableLabs/victory/blob/main/packages/victory-scatter/src/index.d.ts
*required
Name	Type	Default	Description
animate	boolean \| object		The 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})})}
bubbleProperty	string		The bubbleProperty prop indicates which property of the data object should be used to scale data points in a bubble chart
categories	string[] \| { x: string[], y: string[] }		The 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"]
containerComponent	React.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 ChartScatter: 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, ChartScatter will use the default ChartContainer component. @example <ChartContainer title="Chart of Dog Breeds" desc="This chart shows..." />
data	any[]		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}]]
dataComponent	React.ReactElement<any>		The dataComponent prop takes an entire component which will be used to create an area. The new element created from the passed dataComponent will be provided with the following properties calculated by ChartScatter: a scale, style, events, interpolation, and an array of modified data objects (including x, y, and calculated y0 and y1). 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, ChartScatter will use its default Line component.
domain	number[] \| { x: number[], y: number[] }		The 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 [low, high], { x: [low, high], y: [low, high] } [-1, 1], {x: [0, 100], y: [0, 1]}
domainPadding	number \| number[] \| { x: number[], y: number[] }		The 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. @example [left, right], { x: [left, right], y: [bottom, top] } {x: [10, -10], y: 5}
eventKey	number \| string \| Function		Similar to data accessor props `x` and `y`, this prop may be used to functionally assign eventKeys to data
events	object[]		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 ChartScatter events. Since ChartScatter 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. a line), 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, {stroke: "orange"})}; } }, { target: "labels", mutation: () => { return {text: "hey"}; } } ]; } } } ]}
externalEventMutations	object[]		ChartScatter uses the standard externalEventMutations prop.
groupComponent	React.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
height	number		The height props specifies the height the svg viewBox of the chart container. This value should be given as a number of pixels
horizontal	boolean		The 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.
labelComponent	React.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 ChartScatter. If individual labels are required for each data point, they should be created by composing ChartScatter with VictoryScatter
labels	string[] \| number[] \| ((data: any) => string \| number \| null)		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
maxBubbleSize	number		The maxBubbleSize prop sets an upper limit for scaling data points in a bubble chart
maxDomain	number \| { 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. @example maxDomain={0} maxDomain={{ y: 0 }}
minBubbleSize	number		The minBubbleSize prop sets a lower limit for scaling data points in a bubble chart
minDomain	number \| { 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. @example minDomain={0} minDomain={{ y: 0 }}
name	string		The name prop is used to reference a component instance when defining shared events.
origin	{ x: number, y: number }		Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts. Note: It will not typically be necessary to set an origin prop manually
padding	number \| { top: number, bottom: number, left: number, right: number }		The 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[] \| { x: number[], y: 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 or ChartGroup will have no effect. This prop is usually not set manually. @example [low, high] \| { x: [low, high], y: [low, high] } Cartesian: range={{ x: [50, 250], y: [50, 250] }} Polar: range={{ x: [0, 360], y: [0, 250] }}
samples	number		The 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.
scale	string \| { x: string, y: string }		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"}
singleQuadrantDomainPadding	boolean \| { 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. @example singleQuadrantDomainPadding={false} singleQuadrantDomainPadding={{ x: false }}
size	number \| ((data: any) => number)	({ active }) => (active ? ChartScatterStyles.activeSize : ChartScatterStyles.size)	The size prop determines how to scale each data point
sortKey	number \| string \| Function \| string[]		Use 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	string		The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order.
standalone	boolean		The 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 ChartScatter with other components within an enclosing <svg> tag.
style	{ parent: object, data: object, labels: object }		The style prop specifies styles for your ChartScatter. 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}}
symbol	string \| Function		The symbol prop determines which symbol should be drawn to represent data points. Options are: "circle", "cross", "diamond", "plus", "minus", "square", "star", "triangleDown", "triangleUp".
theme	object	getTheme(themeColor)	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 ChartScatter as a solo component, implement the theme directly on ChartScatter. If you are wrapping ChartScatter in ChartChart or ChartGroup, please call the theme on the outermost wrapper component instead.
themeColor	string		Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
Deprecated: themeVariant	string		Specifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop Use PatternFly's pf-theme-dark CSS selector
width	number		The width props specifies the width of the svg viewBox of the chart container This value should be given as a number of pixels
x	number \| string \| Function \| string[]		The 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)
y	number \| string \| Function \| string[]		The 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)
y0	number \| string \| Function \| string[]		Use 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 ChartScatter. This prop may be given in a variety of formats. @example 'last_quarter_profit', () => 10, 1, 'employees.salary', ["employees", "salary"]

ChartStack

ChartStack is a wrapper component that renders a given set of children in a stacked layout. Like other wrapper components, ChartStack also reconciles the domain and layout for all its children, and coordinates animations and shared events. See https://github.com/FormidableLabs/victory/blob/main/packages/victory-stack/src/index.d.ts
*required
Name	Type	Default	Description
animate	boolean \| object		The 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})})}
ariaDesc	string		The ariaDesc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. Note: Overridden by the desc prop of containerComponent
ariaTitle	string		The 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
categories	string[] \| { x: string[], y: string[] }		The 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 values for x and y. When categories are not given as an object When this prop is set on a wrapper component, it will dictate the categories of its the children. If this prop is not set, any categories on child component or catigorical data, will be merged to create a shared set of categories. @example ["dogs", "cats", "mice"]
children	React.ReactNode		ChartStack works with any combination of the following children: ChartArea, ChartBar, VictoryCandlestick, VictoryErrorBar, ChartGroup, ChartLine, VictoryScatter, ChartStack, and ChartVoronoi. Children supplied to ChartGroup will be cloned and rendered with new props so that all children share common props such as domain and scale.
colorScale	string[]		The 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. ChartStack will automatically assign values from this color scale to the bars unless colors are explicitly provided in the `dataAttributes` prop.
containerComponent	React.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 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..." />
domain	number[] \| { x: number[], y: number[] }		The 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 [low, high], { x: [low, high], y: [low, high] } [-1, 1], {x: [0, 100], y: [0, 1]}
domainPadding	number \| number[] \| { x: number[], y: number[] }		The 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. @example [left, right], { x: [left, right], y: [bottom, top] } {x: [10, -10], y: 5}
eventKey	number \| string \| Function		Similar to data accessor props `x` and `y`, this prop may be used to functionally assign eventKeys to data
events	object[]		The event prop take an array of event objects. Event objects are composed of a childName, target, eventKey, and eventHandlers. Targets may be any valid style namespace for a given component, (i.e. "data" and "labels"). The childName will refer to an individual child of ChartStack, either by its name prop, or by index. The eventKey may optionally be used to select a single element by index or eventKey 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 and childName keys, and a mutation key whose value is a function. The target and eventKey and childName 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", childName: "firstBar", eventHandlers: { onClick: () => { return [ { childName: "secondBar", mutation: (props) => { return {style: merge({}, props.style, {fill: "orange"})}; } }, { childName: "secondBar", target: "labels", mutation: () => { return {text: "hey"}; } } ]; } } } ]}
externalEventMutations	object[]		ChartStack uses the standard externalEventMutations prop.
groupComponent	React.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
hasPatternsBeta	boolean \| boolean[]		The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart. SVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected color theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar to the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized patterns would be displayed in that same order. Create custom patterns via the patternScale prop. Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. @example hasPatterns={ true } @example hasPatterns={[ true, true, false ]}
height	number		The height props specifies the height the svg viewBox of the chart container. This value should be given as a number of pixels
horizontal	boolean		The horizontal prop determines whether the bars will be laid vertically or horizontally. The bars will be vertical if this prop is false or unspecified, or horizontal if the prop is set to true.
labelComponent	React.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 ChartArea. If individual labels are required for each data point, they should be created by composing ChartArea with VictoryScatter
labels	string[] \| number[] \| ((data: any) => string \| number \| null)		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
maxDomain	number \| { 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. @example maxDomain={0} maxDomain={{ y: 0 }}
minDomain	number \| { 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. @example minDomain={0} minDomain={{ y: 0 }}
name	string		The name prop is used to reference a component instance when defining shared events.
origin	{ x: number, y: number }		Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts. Note: It will not typically be necessary to set an origin prop manually
padding	number \| { top: number, bottom: number, left: number, right: number }		The 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.
patternScaleBeta	string[]		The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be given as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there are more children than patterns in the provided patternScale. Use null to omit the pattern for a given index. Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]}
range	number[] \| { x: number[], y: 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 or ChartGroup will have no effect. This prop is usually not set manually. @example [low, high] \| { x: [low, high], y: [low, high] } Cartesian: range={{ x: [50, 250], y: [50, 250] }} Polar: range={{ x: [0, 360], y: [0, 250] }}
scale	string \| { x: string, y: string }		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"}
singleQuadrantDomainPadding	boolean \| { 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. @example singleQuadrantDomainPadding={false} singleQuadrantDomainPadding={{ x: false }}
standalone	boolean		The 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 ChartArea with other components within an enclosing <svg> tag.
style	{ parent: object, data: object, labels: object }		The style prop specifies styles for your grouped chart. These styles will be applied to all grouped children
theme	object	getTheme(themeColor)	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 ChartArea as a solo component, implement the theme directly on ChartArea. If you are wrapping ChartArea in ChartChart or ChartGroup, please call the theme on the outermost wrapper component instead.
themeColor	string		Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
Deprecated: themeVariant	string		Specifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop Use PatternFly's pf-theme-dark CSS selector
width	number		The width props specifies the width of the svg viewBox of the chart container This value should be given as a number of pixels
xOffset	number		The xOffset prop is used for grouping stacks of bars. This prop will be set by the ChartGroup component wrapper, or can be set manually.

ChartVoronoiContainer

ChartVoronoiContainer adds the ability to associate a mouse position with the data point(s) closest to it. When this container is added to a chart, changes in mouse position will add the active prop to data and label components closest to the current mouse position. The closeness of data points to a given position is determined by calculating a voronoi diagram based on the data of every child VictoryVoronoiContainer renders. This container is useful for adding hover interactions, like tooltips, to small data points, or charts with dense or overlapping data. See https://github.com/FormidableLabs/victory/blob/main/packages/victory-voronoi-container/src/index.d.ts
*required
Name	Type	Default	Description
activateData	boolean		When 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.
activateLabels	boolean		When 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.
className	string		The className prop specifies a className that will be applied to the outer-most div rendered by the container
constrainToVisibleArea	boolean	false	The 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.
containerId	number \| string		The containerId prop may be used to set a deterministic id for the container. When a containerId is not manually set, a unique id will be generated. It is usually necessary to set deterministic ids for automated testing.
desc	string		The desc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. The more info about the chart provided in the description, the more usable it will be for people using screen readers. This prop defaults to an empty string. @example "Golden retreivers make up 30%, Labs make up 25%, and other dog breeds are not represented above 5% each."
disable	boolean		When the disable prop is set to true, ChartVoronoiContainer events will not fire.
events	React.DOMAttributes<any>		The events prop attaches arbitrary event handlers to the container component. Event handlers passed from other Victory components are called with their corresponding events as well as scale, style, width, height, and data when applicable. Use the invert method to convert event coordinate information to data. `scale.x.invert(evt.offsetX)`. @example {onClick: (evt) => alert(`x: ${evt.clientX}, y: ${evt.clientY}`)}
height	number		The height props specifies the height the svg viewBox of the container. This value should be given as a number of pixels. If no height prop is given, the height prop from the child component passed will be used.
labelComponent	React.ReactElement<any>	<ChartTooltip />	The 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.
labels	(point: any, index: number, points: any[]) => string		When 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.
mouseFollowTooltips	boolean		When the mouseFollowTooltip prop is set on ChartVoronoiContainer, The position of the center of the tooltip follows the position of the mouse.
name	string		The name prop is used to reference a component instance when defining shared events.
onActivated	Function		The 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	Function		The 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).
origin	{ x: number, y: number }		Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts. Note: It will not typically be necessary to set an origin prop manually
portalComponent	React.ReactElement		The portalComponent prop takes a component instance which will be used as a container for children that should render inside a top-level container so that they will always appear above other elements. ChartTooltip renders inside a portal so that tooltips always render above data. VictoryPortal is used to define elements that should render in the portal container. This prop defaults to Portal, and should only be overridden when changing rendered elements from SVG to another type of element e.g., react-native-svg elements.
portalZIndex	number		The portalZIndex prop determines the z-index of the div enclosing the portal component. If a portalZIndex prop is not set, the z-index of the enclosing div will be set to 99.
radius	number		When 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.
responsive	boolean		The 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
style	React.CSSProperties		The style prop specifies styles for your ChartContainer. 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. @example {border: 1px solid red}
tabIndex	number		The tabIndex prop specifies the description of the chart/SVG to assist with accessibility.
theme	object	getTheme(themeColor)	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.
themeColor	string		Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
Deprecated: themeVariant	string		Specifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop Use PatternFly's pf-theme-dark CSS selector
voronoiBlacklist	string[]		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.
voronoiPadding	number		When 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.
width	number		The width props specifies the width of the svg viewBox of the container This value should be given as a number of pixels. If no width prop is given, the width prop from the child component passed will be used.

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines