Skip to content
PatternFly logo

Stack 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 stack chart using a Katacoda tutorial starting with a simple chart, adding multiple datasets, tooltips, axis labels, a legend, and concluding by changing the theme color. You'll learn how to use React chart components together to build a consistent user experience.

Start course

Examples

Basic with right aligned legend

Stack chart exampleAverage number of pets2015201620172018510152025CatsDogsBirdsMice

Horizontal with bottom aligned legend

Stack chart exampleAverage number of pets2015201620172018510152025CatsDogsBirdsMice

Multi-color (ordered) horizontal with bottom aligned legend

This demonstrates an alternate way of applying tooltips using data labels.

Stack chart exampleAverage number of pets2015201620172018510152025CatsDogsBirdsMice

Monthly data with responsive container

Monthly Stack ChartStack Chart with monthly metric dataAug. 3051015SocketsCoresNodes

Multi-color (unordered) responsive container

This demonstrates monthly data with a bottom aligned legend and responsiveness for mobile.

Area chart exampleAverage number of petsSundayMondayTuesdayWednesdayThursdayFridaySaturday51015202530CatsDogsBirds

Documentation

Tips

  • See Victory's FAQ
  • For single data points or zero values, you may want to set the domain prop
  • ChartLegend may be used as a standalone component, instead of using legendData
  • 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:

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
NameTypeDefaultDescription
animateboolean | objectThe animate prop specifies props for VictoryAnimation to use. The animate prop should also be used to specify enter and exit transition configurations with the `onExit` and `onEnter` namespaces respectively. @example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}
ariaDescstringThe ariaDesc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. Note: Overridden by the desc prop of containerComponent
ariaTitlestringThe ariaTitle prop specifies the title to be applied to the SVG to assist accessibility for screen readers. Note: Overridden by the title prop of containerComponent
backgroundComponentReact.ReactElementThe 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.
childrenReact.ReactNode | React.ReactNode[]The children to render with the chart
containerComponentReact.ReactElement<any><ChartContainer />The containerComponent prop takes an entire component which will be used to create a container element for standalone charts. The new element created from the passed containerComponent wil be provided with these props from 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 ..." />
domainnumber[] | { 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]}
domainPaddingnumber | 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}
endAnglenumberThe endAngle props defines the overall end angle of a polar chart in degrees. This prop is used in conjunction with startAngle to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise.
eventKeynumber | string | FunctionSimilar to data accessor props `x` and `y`, this prop may be used to functionally assign eventKeys to data
eventsobject[]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"}; } } ]; } } } ]}
externalEventMutationsobject[]Chart uses the standard externalEventMutations prop.
groupComponentReact.ReactElement<any>The groupComponent prop takes an entire component which will be used to create group elements for use within container elements. This prop defaults to a <g> tag on web, and a react-native-svg <G> tag on mobile
hasPatternsBetaboolean | 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 ]}
heightnumbertheme.chart.heightSpecifies the height the svg viewBox of the chart container. This value should be given as a number of pixels. Because Victory renders responsive containers, the width and height props do not determine the width and height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of pixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set to the same width in order to maintain the aspect ratio.
horizontalbooleanThe horizontal prop determines whether data will be plotted horizontally. When this prop is set to true, the independent variable will be plotted on the y axis and the dependent variable will be plotted on the x axis.
innerRadiusnumber | FunctionWhen the innerRadius prop is set, polar charts will be hollow rather than circular.
legendAllowWrapbooleanfalseAllows 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
legendComponentReact.ReactElement<any><ChartLegend />The legend component to render with chart. Note: Use legendData so the legend width can be calculated and positioned properly. Default legend properties may be applied
legendData{ name?: string; symbol?: { fill?: string; type?: string; }; }[]Specify data via the data prop. ChartLegend expects data as an array of objects with name (required), symbol, and labels properties. The data prop must be given as an array. @example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}
legendOrientation'horizontal' | 'vertical'theme.legend.orientationThe 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.positionThe legend position relation to the chart. Valid values are 'bottom', 'bottom-left', and 'right' Note: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some cases, the legend may not be visible until enough padding is applied.
maxDomainnumber | { x?: number; y?: number }The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum domain of a chart is static, while the minimum value depends on data or other variable information. If the domain prop is set in addition to maximumDomain, domain will be used. Note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. @example maxDomain={0} maxDomain={{ y: 0 }}
minDomainnumber | { x?: number; y?: number }The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum domain of a chart is static, while the maximum value depends on data or other variable information. If the domain prop is set in addition to minimumDomain, domain will be used. Note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. @example minDomain={0} minDomain={{ y: 0 }}
namestringThe 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.
paddingnumber | { 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.
patternScaleBetastring[]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 ]}
polarbooleanVictory components can pass a boolean polar prop to specify whether a label is part of a polar chart.
rangenumber[] | { 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] }}
scalestring | { 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"}
showAxisbooleantrueConvenience prop to hide both x and y axis, which are shown by default. Alternatively, the axis can be hidden via chart styles.
singleQuadrantDomainPaddingboolean | { x?: boolean; y?: boolean }By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive values, no amount of padding applied by domainPadding will result in a domain with negative values. This is the desired behavior in most cases. For users that need to apply padding without regard to quadrant, the singleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values specified for "x" and/or "y". When this prop is false (or false for a given dimension), padding will be applied without regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants. Note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. @example singleQuadrantDomainPadding={false} singleQuadrantDomainPadding={{ x: false }}
standalonebooleanThe standalone prop determines whether the component will render a standalone svg or a <g> tag that will be included in an external svg. Set standalone to false to compose Chart with other components within an enclosing <svg> tag.
startAnglenumberThe startAngle props defines the overall start angle of a polar chart in degrees. This prop is used in conjunction with endAngle to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise.
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 }
themeobjectgetChartTheme(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.
themeColorstringSpecifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
Deprecated: themeVariantstringSpecifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop Use PatternFly's pf-theme-dark CSS selector
widthnumbertheme.chart.widthSpecifies the width of the svg viewBox of the chart container. This value should be given as a number of pixels. Because Victory renders responsive containers, the width and height props do not determine the width and height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of pixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set to the same width in order to maintain the aspect ratio.

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
NameTypeDefaultDescription
animateboolean | objectThe 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})})}
categoriesstring[] | { 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"]
containerComponentReact.ReactElement<any><ChartContainer />The containerComponent prop takes an entire component which will be used to create a container element for standalone charts. The new element created from the passed containerComponent wil be provided with these props from 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..." />
dataany[]The data prop specifies the data to be plotted. Data should be in the form of an array of data points, or an array of arrays of data points for multiple datasets. Each data point may be any format you wish (depending on the `x` and `y` accessor props), but by default, an object with x and y properties is expected. @example [{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]], [[{x: "a", y: 1}, {x: "b", y: 2}], [{x: "a", y: 2}, {x: "b", y: 3}]]
dataComponentReact.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.
domainnumber[] | { 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]}
domainPaddingnumber | 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}
eventKeynumber | string | Function | string[] | number[]Similar to data accessor props `x` and `y`, this prop may be used to functionally assign eventKeys to data
eventsobject[]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"}; } } ]; } } } ]}
externalEventMutationsobject[]ChartArea uses the standard externalEventMutations prop.
groupComponentReact.ReactElement<any>The groupComponent prop takes an entire component which will be used to create group elements for use within container elements. This prop defaults to a <g> tag on web, and a react-native-svg <G> tag on mobile
heightnumberThe height props specifies the height the svg viewBox of the chart container. This value should be given as a number of pixels
horizontalbooleanThe horizontal prop determines whether data will be plotted horizontally. When this prop is set to true, the independent variable will be plotted on the y axis and the dependent variable will be plotted on the x axis.
interpolationstring | FunctionThe 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".
labelComponentReact.ReactElement<any>The labelComponent prop takes in an entire label component which will be used to create a label for the area. The new element created from the passed labelComponent will be supplied with the following properties: x, y, index, data, verticalAnchor, textAnchor, angle, style, text, and events. any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If labelComponent is omitted, a new ChartLabel will be created with props described above. This labelComponent prop should be used to provide a series label for ChartArea. If individual labels are required for each data point, they should be created by composing ChartArea with VictoryScatter
labelsstring[] | 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
maxDomainnumber | { x?: number; y?: number }The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum domain of a chart is static, while the minimum value depends on data or other variable information. If the domain prop is set in addition to maximumDomain, domain will be used. Note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. @example maxDomain={0} maxDomain={{ y: 0 }}
minDomainnumber | { x?: number; y?: number }The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum domain of a chart is static, while the maximum value depends on data or other variable information. If the domain prop is set in addition to minimumDomain, domain will be used. Note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. @example minDomain={0} minDomain={{ y: 0 }}
namestringThe 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
paddingnumber | { 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.
polarbooleanVictory components can pass a boolean polar prop to specify whether a label is part of a polar chart.
rangenumber[] | { 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] }}
samplesnumberThe samples prop specifies how many individual points to plot when plotting y as a function of x. Samples is ignored if x props are provided instead.
scalestring | { 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"}
singleQuadrantDomainPaddingboolean | { x?: boolean; y?: boolean }By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive values, no amount of padding applied by domainPadding will result in a domain with negative values. This is the desired behavior in most cases. For users that need to apply padding without regard to quadrant, the singleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values specified for "x" and/or "y". When this prop is false (or false for a given dimension), padding will be applied without regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants. Note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. @example singleQuadrantDomainPadding={false} singleQuadrantDomainPadding={{ x: false }}
sortKeynumber | 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.
sortOrderstringThe sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order.
standalonebooleanThe standalone prop determines whether the component will render a standalone svg or a <g> tag that will be included in an external svg. Set standalone to false to compose 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}}
themeobjectgetTheme(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.
themeColorstringSpecifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
Deprecated: themeVariantstringSpecifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop Use PatternFly's pf-theme-dark CSS selector
widthnumberThe width props specifies the width of the svg viewBox of the chart container This value should be given as a number of pixels
xnumber | 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)
ynumber | 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)
y0number | 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"]

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
NameTypeDefaultDescription
alignmentstringThe 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.
animateboolean | objectThe 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})})}
barRationumberThe 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.
barWidthnumber | FunctionThe 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.
categoriesstring[] | { 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"]
containerComponentReact.ReactElement<any><ChartContainer />The containerComponent prop takes an entire component which will be used to create a container element for standalone charts. The new element created from the passed containerComponent wil be provided with these props from 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..." />
cornerRadiusFunction | 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}
dataany[]The data prop specifies the data to be plotted. Data should be in the form of an array of data points, or an array of arrays of data points for multiple datasets. Each data point may be any format you wish (depending on the `x` and `y` accessor props), but by default, an object with x and y properties is expected. @example [{x: 1, y: 2}, {x: 2, y: 3}], [[1, 2], [2, 3]], [[{x: "a", y: 1}, {x: "b", y: 2}], [{x: "a", y: 2}, {x: "b", y: 3}]]
dataComponentReact.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.
domainnumber[] | { 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]}
domainPaddingnumber | 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}
eventKeynumber | string | FunctionSimilar to data accessor props `x` and `y`, this prop may be used to functionally assign eventKeys to data
eventsobject[]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"}; } } ]; } } } ]}
externalEventMutationsobject[]ChartBar uses the standard externalEventMutations prop.
groupComponentReact.ReactElement<any>The groupComponent prop takes an entire component which will be used to create group elements for use within container elements. This prop defaults to a <g> tag on web, and a react-native-svg <G> tag on mobile
heightnumberThe height props specifies the height the svg viewBox of the chart container. This value should be given as a number of pixels
horizontalbooleanThe horizontal prop determines whether 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.
labelComponentReact.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
labelsstring[] | 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
maxDomainnumber | { x?: number; y?: number }The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum domain of a chart is static, while the minimum value depends on data or other variable information. If the domain prop is set in addition to maximumDomain, domain will be used. Note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. @example maxDomain={0} maxDomain={{ y: 0 }}
minDomainnumber | { x?: number; y?: number }The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum domain of a chart is static, while the maximum value depends on data or other variable information. If the domain prop is set in addition to minimumDomain, domain will be used. Note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. @example minDomain={0} minDomain={{ y: 0 }}
namestringThe 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
paddingnumber | { 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.
rangenumber[] | { 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] }}
samplesnumberThe samples prop specifies how many individual points to plot when plotting y as a function of x. Samples is ignored if x props are provided instead.
scalestring | { 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"}
singleQuadrantDomainPaddingboolean | { x?: boolean; y?: boolean }By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive values, no amount of padding applied by domainPadding will result in a domain with negative values. This is the desired behavior in most cases. For users that need to apply padding without regard to quadrant, the singleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values specified for "x" and/or "y". When this prop is false (or false for a given dimension), padding will be applied without regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants. Note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. @example singleQuadrantDomainPadding={false} singleQuadrantDomainPadding={{ x: false }}
sortKeynumber | 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.
sortOrderstringThe sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order.
standalonebooleanThe standalone prop determines whether the component will render a standalone svg or a <g> tag that will be included in an external svg. Set standalone to false to compose 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}}
themeobjectgetTheme(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.
themeColorstringSpecifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
Deprecated: themeVariantstringSpecifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop Use PatternFly's pf-theme-dark CSS selector
widthnumberThe width props specifies the width of the svg viewBox of the chart container This value should be given as a number of pixels
xnumber | 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)
ynumber | 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)
y0number | 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"]

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
NameTypeDefaultDescription
animateboolean | objectThe animate prop specifies props for VictoryAnimation to use. The animate prop should also be used to specify enter and exit transition configurations with the `onExit` and `onEnter` namespaces respectively. @example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}
ariaDescstringThe ariaDesc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. Note: Overridden by the desc prop of containerComponent
ariaTitlestringThe ariaTitle prop specifies the title to be applied to the SVG to assist accessibility for screen readers. Note: Overridden by the title prop of containerComponent
categoriesstring[] | { 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"]
childrenReact.ReactNodeChartStack 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.
colorScalestring[]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.
containerComponentReact.ReactElement<any><ChartContainer />The containerComponent prop takes an entire component which will be used to create a container element for standalone charts. The new element created from the passed containerComponent wil be provided with these props from 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..." />
domainnumber[] | { 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]}
domainPaddingnumber | 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}
eventKeynumber | string | FunctionSimilar to data accessor props `x` and `y`, this prop may be used to functionally assign eventKeys to data
eventsobject[]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"}; } } ]; } } } ]}
externalEventMutationsobject[]ChartStack uses the standard externalEventMutations prop.
groupComponentReact.ReactElement<any>The groupComponent prop takes an entire component which will be used to create group elements for use within container elements. This prop defaults to a <g> tag on web, and a react-native-svg <G> tag on mobile
hasPatternsBetaboolean | 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 ]}
heightnumberThe height props specifies the height the svg viewBox of the chart container. This value should be given as a number of pixels
horizontalbooleanThe horizontal prop determines whether 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.
labelComponentReact.ReactElement<any>The labelComponent prop takes in an entire label component which will be used to create a label for the area. The new element created from the passed labelComponent will be supplied with the following properties: x, y, index, data, verticalAnchor, textAnchor, angle, style, text, and events. any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If labelComponent is omitted, a new ChartLabel will be created with props described above. This labelComponent prop should be used to provide a series label for ChartArea. If individual labels are required for each data point, they should be created by composing ChartArea with VictoryScatter
labelsstring[] | 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
maxDomainnumber | { x?: number; y?: number }The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum domain of a chart is static, while the minimum value depends on data or other variable information. If the domain prop is set in addition to maximumDomain, domain will be used. Note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. @example maxDomain={0} maxDomain={{ y: 0 }}
minDomainnumber | { x?: number; y?: number }The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum domain of a chart is static, while the maximum value depends on data or other variable information. If the domain prop is set in addition to minimumDomain, domain will be used. Note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. @example minDomain={0} minDomain={{ y: 0 }}
namestringThe 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
paddingnumber | { 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.
patternScaleBetastring[]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 ]}
rangenumber[] | { 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] }}
scalestring | { 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"}
singleQuadrantDomainPaddingboolean | { x?: boolean; y?: boolean }By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive values, no amount of padding applied by domainPadding will result in a domain with negative values. This is the desired behavior in most cases. For users that need to apply padding without regard to quadrant, the singleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values specified for "x" and/or "y". When this prop is false (or false for a given dimension), padding will be applied without regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants. Note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. @example singleQuadrantDomainPadding={false} singleQuadrantDomainPadding={{ x: false }}
standalonebooleanThe standalone prop determines whether the component will render a standalone svg or a <g> tag that will be included in an external svg. Set standalone to false to compose 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
themeobjectgetTheme(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.
themeColorstringSpecifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
Deprecated: themeVariantstringSpecifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop Use PatternFly's pf-theme-dark CSS selector
widthnumberThe width props specifies the width of the svg viewBox of the chart container This value should be given as a number of pixels
xOffsetnumberThe xOffset prop is used for grouping stacks of bars. This prop will be set by the ChartGroup component wrapper, or can be set manually.

ChartTooltip

ChartTooltip renders a tooltip component with a set of default events. When ChartTooltip is used as a label component for any Victory based component that renders data, it will attach events to rendered data components that will activate the tooltip when hovered or focused. ChartTooltipTooltip renders text as well as a configurable Flyout container. Note: When providing tooltips for ChartLine or ChartArea, it is necessary to use ChartVoronoiContainer, as these components only render a single element for the entire dataset. See https://github.com/FormidableLabs/victory/blob/main/packages/victory-tooltip/src/index.d.ts
*required
NameTypeDefaultDescription
activateDatabooleanWhen true, tooltip events will set the active prop on both data and label elements.
activebooleanThe active prop specifies whether the tooltip component should be displayed.
anglestring | numberThe angle prop specifies the angle to rotate the tooltip around its origin point.
center{ x: number; y: number }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.
constrainToVisibleAreabooleanfalseThe constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of the chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the center of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders.
cornerRadiusnumber | FunctionThe cornerRadius prop determines corner radius of the flyout container. This prop may be given as a positive number or a function of datum.
dataany[]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.
dxnumber | FunctionThe dx prop defines a horizontal shift from the x coordinate.
dynumber | FunctionThe dy prop defines a vertical shift from the y coordinate.
eventsobjectThe 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)}}
flyoutComponentReact.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/>}
flyoutHeightnumber | FunctionThe 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.
flyoutStylenumber | FunctionThe style prop applies SVG style properties to the rendered flyout container. These props will be passed to the flyoutComponent.
flyoutWidthnumber | FunctionThe 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.
groupComponentReact.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.}
horizontalbooleanThe 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.
indexnumber | stringThe index prop represents the index of the datum in the data array.
labelComponentReact.ReactElement<any><ChartLabel />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/>}
labelTextAnchorstring | FunctionDefines how the labelComponent text is horizontally positioned relative to its `x` and `y` coordinates. Valid values are 'start', 'middle', 'end', and 'inherit'.
orientationstring | FunctionThe 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.
pointerLengthnumber | FunctionThe 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.
pointerOrientationstring | FunctionThis 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.
pointerWidthnumber | FunctionThe 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.
renderInPortalbooleanWhen 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.
styleReact.CSSProperties | React.CSSProperties[]The style prop applies CSS properties to the rendered `<text>` element.
textnumber | 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.
themeobjectgetTheme(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.
themeColorstringSpecifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
Deprecated: themeVariantstringSpecifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop Use PatternFly's pf-theme-dark CSS selector
xnumberThe x prop defines the x coordinate to use as a basis for horizontal positioning.
ynumberThe y prop defines the y coordinate to use as a basis for vertical positioning.

View source on GitHub