Bullet 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 bullet chart using a Katacoda tutorial starting with a simple chart, adding qualitative ranges, primary comparative measures, a comparative warning measure, tooltips, 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

Segmented primary measure

Responsive container with bottom aligned legend

This demonstrates a responsive legend which wraps when items are wider than its container.

Primary measure dot

Error measure and custom axis ticks

This is a green bullet chart with error measure and custom axis ticks with 3 legend items per row.

Primary measure outside range

This is a gold bullet chart with primary measure greater than max range.

Negative primary measure

This bullet chart with negative primary measure is for measures considered to be bad when they are low.

Reversed with right aligned legend

This reversed bullet chart with right aligned legend is for measures considered to be good when they are low.

Negative and positive primary measures

This bullet chart with negative and positive primary measures has 4 legend items per row.

Vertical with segmented primary measure

Vertical primary measure outside max range

Custom labels

Custom size

Horizontal group

Vertical group

Horizontal group with title

Vertical group with title

Documentation

Tips

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

Note

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

For ChartAxis props, see VictoryAxis
For ChartBullet props, see VictoryBar
For ChartContainer props, see VictoryContainer

Props

ChartAxis

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

ChartBullet

*required
Name	Type	Default	Description
allowTooltip	boolean	true	Specifies the tooltip capability of the container component. A value of true allows the chart to add a ChartTooltip component to the labelComponent property. This is a shortcut to display tooltips when the labels property is also provided.
ariaDesc	string		The ariaDesc prop specifies the description of the chart/SVG to assist with accessibility for screen readers.
ariaTitle	string		The ariaTitle prop specifies the title to be applied to the SVG to assist accessibility for screen readers.
axisComponent	React.ReactElement<any>	<ChartAxis />	The axis component to render with the chart
bulletSize	number	theme.chart.height	Specifies the size of the bullet chart. For a horizontal chart, this adjusts bar height; although, it technically scales the underlying barWidth property. Note: Values should be >= 125, the default is 140
comparativeErrorMeasureComponent	React.ReactElement<any>	<ChartBulletComparativeErrorMeasure />	The comparative error measure component to render with the chart
comparativeErrorMeasureData	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 `comparativeErrorMeasureDataY` accessor prop), but by default, an object with y properties is expected. @example comparativeErrorMeasureData={[{ y: 50 }]}
comparativeErrorMeasureDataY	number \| string \| Function \| string[]		The comparativeErrorMeasureDataY 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)
comparativeErrorMeasureLegendData	{ 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' }]}
comparativeWarningMeasureComponent	React.ReactElement<any>	<ChartBulletComparativeWarningMeasure />	The comparative warning measure component to render with the chart
comparativeWarningMeasureData	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 `comparativeErrorMeasureDataY` accessor prop), but by default, an object with y properties is expected. @example comparativeWarningMeasureData={[{ y: 50 }]}
comparativeWarningMeasureDataY	number \| string \| Function \| string[]		The comparativeWarningMeasureDataY 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)
comparativeWarningMeasureLegendData	{ 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' }]}
comparativeZeroMeasureComponent	React.ReactElement<any>	<ChartBulletComparativeMeasure />	The comparative zero measure component to render with the chart
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.
domain	number[] \| { x: number[], y: number[] }	getBulletDomain({ comparativeErrorMeasureComponent, comparativeErrorMeasureData, comparativeWarningMeasureComponent, comparativeWarningMeasureData, maxDomain, minDomain, primaryDotMeasureComponent, primaryDotMeasureData, primarySegmentedMeasureComponent, primarySegmentedMeasureData, qualitativeRangeComponent, qualitativeRangeData })	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. Note: The x domain is expected to be `x: [0, 2]` in order to position all measures properly @example [low, high], { x: [low, high], y: [low, high] } {x: [0, 2], y: [0, 100]}
groupSubTitle	string		The subtitle to render for grouped bullets
groupTitle	string		The title to render for grouped bullets
groupTitleComponent	React.ReactElement<any>	<ChartBulletGroupTitle />	The group title component to render for grouped bullets
height	number	horizontal ? theme.chart.height : theme.chart.width	Specifies the height the svg viewBox of the chart container. This value should be given as a number of pixels. Because Victory renders responsive containers, the width and height props do not determine the width and height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of pixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set to the same width in order to maintain the aspect ratio.
horizontal	boolean	true	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.
invert	boolean	false	Invert the color scales used to represent primary measures and qualitative ranges.
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={[{y: 1, label: "first"}]}. @example ["spring", "summer", "fall", "winter"], (datum) => datum.title
legendAllowWrap	boolean	false	Allows legend items to wrap. A value of true allows the legend to wrap onto the next line if its container is not wide enough. Note: This is overridden by the legendItemsPerRow property
legendComponent	React.ReactElement<any>	<ChartLegend />	The legend component to render with chart.
legendItemsPerRow	number		The legendItemsPerRow prop determines how many items to render in each row of a horizontal legend, or in each column of a vertical legend. This prop should be given as an integer. When this prop is not given, legend items will be rendered in a single row or column.
legendOrientation	'horizontal' \| 'vertical'	theme.legend.orientation	The orientation prop takes a string that defines whether legend data are displayed in a row or column. When orientation is "horizontal", legend items will be displayed in a single row. When orientation is "vertical", legend items will be displayed in a single column. Line and text-wrapping is not currently supported, so "vertical" orientation is both the default setting and recommended for displaying many series of data.
legendPosition	'bottom' \| 'bottom-left' \| 'right'	'bottom'	The legend position relation to the chart. Valid values are 'bottom', 'bottom-left', and 'right' Note: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some cases, the legend may not be visible until enough padding is applied.
maxDomain	number \| { x?: number; y?: number }		The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum domain of a chart is static, while the minimum value depends on data or other variable information. If the domain prop is set in addition to maximumDomain, domain will be used. note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. @example maxDomain={0} maxDomain={{ y: 0 }} Note: The x domain is expected to be `x: 2` in order to position all measures properly
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 }} Note: The x domain is expected to be `x: 0` in order to position all measures properly
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. Note: The underlying bullet chart is a different size than height and width. For a horizontal chart, left and right padding may need to be applied at (approx) 2 to 1 scale.
primaryDotMeasureComponent	React.ReactElement<any>	<ChartBulletPrimaryDotMeasure />	The primary dot measure component to render with the chart
primaryDotMeasureData	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 `comparativeErrorMeasureDataY` accessor prop), but by default, an object with y properties is expected. @example primaryDotMeasureData={[{ y: 50 }]}
primaryDotMeasureDataY	number \| string \| Function \| string[]		The primaryDotMeasureDataY 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)
primaryDotMeasureLegendData	{ 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' }]}
primarySegmentedMeasureComponent	React.ReactElement<any>	<ChartBulletPrimarySegmentedMeasure />	The primary segmented measure component to render with the chart
primarySegmentedMeasureData	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 `comparativeErrorMeasureDataY` accessor prop), but by default, an object with y properties is expected. @example primarySegmentedMeasureData={[{ y: 50 }]}
primarySegmentedMeasureDataY	number \| string \| Function \| string[]		The primarySegmentedMeasureDataY 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)
primarySegmentedMeasureLegendData	{ 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' }]}
qualitativeRangeComponent	React.ReactElement<any>	<ChartBulletQualitativeRange />	The qualitative range component to render with the chart
qualitativeRangeData	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 `comparativeErrorMeasureDataY` accessor prop), but by default, an object with y properties is expected. @example qualitativeRangeData={[{ y: 50 }]}
qualitativeRangeDataY	number \| string \| Function \| string[]		The qualitativeRangeDataY 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)
qualitativeRangeDataY0	number \| string \| Function \| string[]		Use qualitativeRangeDataY0 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"]
qualitativeRangeLegendData	{ 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' }]}
standalone	boolean	true	The standalone prop determines whether the component will render a standalone svg or a <g> tag that will be included in an external svg. Set standalone to false to compose Chart with other components within an enclosing <svg> tag.
subTitle	string		The subtitle for the chart
theme	object	getBulletThemeWithLegendColorScale({ comparativeErrorMeasureData, comparativeErrorMeasureLegendData, comparativeWarningMeasureData, comparativeWarningMeasureLegendData, invert, primaryDotMeasureData, primaryDotMeasureLegendData, primarySegmentedMeasureData, primarySegmentedMeasureLegendData, qualitativeRangeData, qualitativeRangeLegendData, 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 for the chart
titleComponent	React.ReactElement<any>	<ChartBulletTitle />	The label component to render the chart title.
titlePosition	'left' \| 'top-left'		The title position relation to the chart. Valid values are 'left', and 'top-left' Note: These properties are only valid for horizontal layouts
width	number	horizontal ? theme.chart.width : theme.chart.height	Specifies the width of the svg viewBox of the chart container. This value should be given as a number of pixels. Because Victory renders responsive containers, the width and height props do not determine the width and height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of pixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set to the same width in order to maintain the aspect ratio.

ChartContainer

*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.

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines