Sparkline chart

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.

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

Start course

Examples

Basic

Green

This demonstrates an alternate way of applying tooltips using CSS overflow

Documentation

Tips

See Victory's FAQ
For single data points or zero values, you may want to set the domain prop
Use ChartGroup in place of Chart when an axis and labels are not desired
Themes are inherited, so a default theme may override themeColor for a child component
The theme and themeColor props should be applied at the most top level component

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 ChartArea props, see VictoryArea
For ChartGroup props, see VictoryGroup
For ChartLabel props, see VictoryLabel
For ChartVoronoiContainer props, see VictoryVoronoiContainer

Props

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

ChartContainer

ChartContainer provides a top-level <svg> element for other Victory based components to render within. By default, ChartContainer renders responsive SVGs. See https://github.com/FormidableLabs/victory/blob/main/packages/victory-core/src/victory-container/victory-container.tsx
*required
Name	Type	Default	Description
children	React.ReactElement \| React.ReactElement[]		The children prop specifies the child or children that will be rendered within the container. It will be set by whatever Victory component is rendering the container.
className	string		The className prop specifies a className that will be applied to the outer-most div rendered by ChartContainer
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.
containerRef	React.RefObject<HTMLElement>		The containerRef prop may be used to attach a ref to the outermost element rendered by the container. @example containerRef={(ref) => { this.chartRef = ref; }}
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."
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.
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
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. VictoryTooltip 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.
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.
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
title	string		The title prop specifies the title to be applied to the SVG to assist accessibility for screen readers. The more descriptive this title is, the more useful it will be. If no title prop is passed, it will default to Chart. @example "Popularity of Dog Breeds by Percentage"
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.

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

ChartLabel

ChartLabel renders the label components that are used across all Victory based components. See https://github.com/FormidableLabs/victory/blob/main/packages/victory-core/src/victory-label/victory-label.tsx
*required
Name	Type	Description
active	boolean	The active prop specifies whether the label is active or not. The active prop is set by defaultEvents in components like ChartTooltip and VictorySelectionContainer. The active prop is used when evaluating functional styles and props.
angle	string \| number	Specifies the angle to rotate the text by.
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.
className	string	The className prop specifies a class name that will be applied to the rendered text element.
data	any[]	Labels that apply to an entire data series will recieve the entire series as `data` instead of an individual datum prop.
datum	{}	Victory components can pass a datum prop to their label component. This can be used to calculate functional styles, and determine child text
desc	string	The desc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. The more descriptive this title is, the more useful it will be for people using screen readers.
direction	'rtl' \| 'ltr' \| 'inherit'	The direction prop determines which text direction to apply to the rendered text element
dx	number \| string \| Function	The dx prop defines a horizontal shift from the `x` coordinate.
dy	number \| string \| Function	The dy prop defines a vertical shift from the `y` coordinate. Since this component already accounts for `capHeight`, `lineHeight`, and `verticalAnchor`, this will usually not be necessary.
events	React.DOMAttributes<any>	The events prop attaches arbitrary event handlers to the label component. Event handlers are currently only called with their corresponding events.
id	StringOrNumberOrCallback	The id prop specifies a HTML ID that will be applied to the rendered text element.
inline	boolean	When the text property contains an array of strings, the inline property lets the <tspan /> elements lay out next to each other. If this property is not specified, the <tspan /> elements will stack vertically instead.
labelPlacement	string	The labelPlacement prop is used to specify the placement of labels relative to the data point they represent. This prop may be given as “vertical”, “parallel” or “perpendicular”. This props is particularly useful in polar charts, where it may be desireable to position a label either parallel or perpendicular to its corresponding angle. When this prop is not set, perpendicular label placement will be used for polar charts, and vertical label placement will be used for cartesian charts.
lineHeight	number \| string \| Function	The lineHeight prop defines how much space a single line of text should take up. Note that SVG has no notion of line-height, so the positioning may differ slightly from what you would expect with CSS, but the result is similar: a roughly equal amount of extra space is distributed above and below the line of text. The value should ideally use the same units as `capHeight` and `dy`, preferably ems. If given a unitless number, it is assumed to be ems.
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
renderInPortal	boolean	The renderInPortal prop specifies whether ChartLabel should render text in place or within a VictoryPortal. Setting renderInPortal to true is equivalent to wrapping ChartLabel in a VictoryPortal. This prop is false by default.
style	React.CSSProperties \| React.CSSProperties[]	The style prop applies CSS properties to the rendered `<text>` element.
text	number \| string \| Function \| string[]	The text prop defines the text ChartLabel will render. The text prop may be given as a string, number, a function of datum, or an array of any of these. Strings may include newline characters, which ChartLabel will split into separate <tspan/> elements. When text is given as an array, separate <tspan/> elements will be created for each element in the array.
textAnchor	string \| Function	The textAnchor prop defines how the text is horizontally positioned relative to the given `x` and `y` coordinates. Options are "start", "middle" and "end". Note that this overrides the style prop.
transform	string \| {} \| (() => string \| {})	The transform prop applies a transform to the rendered `<text>` element. In addition to being a string, it can be an object containing transform definitions for easier authoring.
verticalAnchor	string	The verticalAnchor prop defines how the text is vertically positioned relative to the given `x` and `y` coordinates. Options are "start", "middle" and "end".
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.

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