Patternfly Logo

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

Bullet chart exampleStorage capacity0100255075

Segmented primary measure

Bullet chart exampleStorage capacity0100255075Text labelMeasure detailsMeasure 1Measure 2WarningRange 1Range 2

Responsive container with bottom aligned legend

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

Bullet chart exampleStorage capacity0100255075Text labelMeasure detailsMeasure 1Measure 2WarningRange 1Range 2

Bullet chart with primary measure dot

Bullet chart exampleStorage capacity0100255075Text labelMeasure detailsMeasure 1Measure 2WarningRange 1Range 2

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

Bullet chart exampleStorage capacity075150Text labelMeasure detailsMeasure 1Measure 2WarningErrorRange 1Range 2

Primary measure outside range

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

Bullet chart exampleStorage capacity501256988107Text labelMeasure detailsMeasure 1Measure 2WarningRange 1Range 2

Negative primary measure

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

Bullet chart exampleStorage capacity-257502550Text labelMeasure detailsMeasure 1WarningRange 1Range 2

Reversed with right aligned legend

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

Bullet chart exampleStorage capacity-1000-75-50-25Text labelMeasure detailsMeasure 1Measure 2WarningRange 1Range 2

Negative and positive primary measures

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

Bullet chart exampleStorage capacity-257502550Text labelMeasure detailsMeasure 1Measure 2Measure 3Measure 4WarningRange 1Range 2

Vertical with segmented primary measure

Bullet chart exampleStorage capacity0100255075Text labelMeasure detailsMeasure 1Measure 2WarningRange 1Range 2

Vertical primary measure outside max range

Bullet chart exampleStorage capacity501256988107Text labelMeasure detailsMeasure 1Measure 2WarningRange 1Range 2

Custom size

Bullet chart exampleStorage capacity0100255075Text labelMeasure detailsMeasure 1WarningRange 1Range 2

Horizontal group

0100255075Text labelMeasure details0100255075Text labelMeasure details0100255075Text labelMeasure details0100255075Text labelMeasure detailsMeasure 1Measure 2WarningRange 1Range 2

Vertical group

0100255075Text labelMeasure detailsMeasure 1Measure 2WarningRange 1Range 20100255075Text labelMeasure details0100255075Text labelMeasure details0100255075Text labelMeasure details

Horizontal group with title

0100255075Text labelMeasure detailsText labelMeasure details0100255075Text labelMeasure details0100255075Text labelMeasure details0100255075Text labelMeasure detailsMeasure 1Measure 2WarningRange 1Range 2

Vertical group with title

0100255075Text labelMeasure detailsText labelMeasure detailsMeasure 1Measure 2WarningRange 1Range 20100255075Text labelMeasure details0100255075Text labelMeasure details0100255075Text labelMeasure details

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:

Props

ChartAxis properties
NameTypeRequiredDefaultDescription
animateboolean | AnimatePropTypeInterfaceNoThe animate prop specifies props for VictoryAnimation to use. The animate prop should also be used to specify enter and exit transition configurations with the `onExit` and `onEnter` namespaces respectively. @example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}
axisComponentReact.ReactElement<any>NoThe axisComponent prop takes in an entire component which will be used to create the axis line. The new element created from the passed axisComponent will be supplied with the following properties: x1, y1, x2, y2, style and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If an axisComponent is not supplied, ChartAxis will render its default AxisLine component.
axisLabelComponentReact.ReactElement<any>NoThe 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
axisValuenumber | string | object | DateNoThe axisValue prop may be used instead of axisAngle to position the dependent axis. Ths prop is useful when dependent axes should line up with values on the independent axis.
containerComponentReact.ReactElement<any>No<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 ..." />
crossAxisbooleanNoThis prop specifies whether a given axis is intended to cross another axis.
dependentAxisbooleanNoThe 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.
domainDomainPropTypeNoThe domain prop describes the range of values your axis will include. This prop should be given as a array of the minimum and maximum expected values for your axis. If this value is not given it will be calculated based on the scale or tickValues. @example [-1, 1]
domainPaddingDomainPaddingPropTypeNoThe domainPadding prop specifies a number of pixels of padding to add to the beginning and end of a domain. This prop is useful for explicitly spacing ticks farther from the origin to prevent crowding. This prop should be given as an object with numbers specified for x and y.
eventsEventPropTypeInterface<VictoryAxisTTargetType, number | string>[]NoThe 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"}; } } ]; } } } ]}
externalEventMutationsEventCallbackInterface<string | string[], StringOrNumberOrList>[]NoChartAxis uses the standard externalEventMutations prop.
fixLabelOverlapbooleanNoWhen true, this prop reduces the number of tick labels to fit the length of the axis. Labels are removed at approximately even intervals from the original array of labels. This feature only works well for labels that are approximately evenly spaced.
gridComponentReact.ReactElement<any>NoThe gridComponent prop takes in an entire component which will be used to create grid lines. The new element created from the passed gridComponent will be supplied with the following properties: x1, y1, x2, y2, tick, style and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a gridComponent is not supplied, ChartAxis will render its default GridLine component.
groupComponentReact.ReactElement<any>NoThe 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
heightnumberNoSpecifies 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.
invertAxisbooleanNoIf true, this value will flip the domain of a given axis.
labelanyNoThe label prop defines the label that will appear along the axis. This prop should be given as a value or an entire, HTML-complete label component. If a label component is given, it will be cloned. The new element's properties x, y, textAnchor, verticalAnchor, and transform will have defaults provided by the axis; styles filled out with defaults provided by the axis, and overrides from the label component. If a value is given, a new ChartLabel will be created with props and styles from the axis.
maxDomainnumber | { x?: number; y?: number }NoThe maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum domain of a chart is static, while the minimum value depends on data or other variable information. If the domain prop is set in addition to maximumDomain, domain will be used. note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. examples: maxDomain={0} maxDomain={{ y: 0 }}
minDomainnumber | { x?: number; y?: number }NoThe minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum domain of a chart is static, while the maximum value depends on data or other variable information. If the domain prop is set in addition to minimumDomain, domain will be used. note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. examples: minDomain={0} minDomain={{ y: 0 }}
namestringNoChartAxis uses the standard name prop
offsetXnumberNoThis 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.
offsetYnumberNoThis 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.
orientationOrientationTypesNoThe orientation prop specifies the position and orientation of your axis. Valid values are 'top', 'bottom', 'left' and 'right'.
paddingPaddingPropsNoThe 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.
rangeRangePropTypeNoThe range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this corresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this corresponds to a range of angles and radii. When this value is not given it will be calculated from the width, height, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given chart must share the same range, so setting this prop on children nested within Chart, ChartStack, or ChartGroup will have no effect. This prop is usually not set manually. examples: Cartesian: range={{ x: [50, 250], y: [50, 250] }} Polar: range={{ x: [0, 360], y: [0, 250] }}
scaleScalePropType | D3Scale | { x?: ScalePropType | D3Scale; y?: ScalePropType | D3Scale; }NoThe 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"}
sharedEvents{ events: any[]; getEventState: Function }NoThe sharedEvents prop is used internally to coordinate events between components. **This prop should not be set manually.**
showGridbooleanNofalseShow axis grid and ticks
singleQuadrantDomainPaddingboolean | { x?: boolean; y?: boolean }NoBy default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive values, no amount of padding applied by domainPadding will result in a domain with negative values. This is the desired behavior in most cases. For users that need to apply padding without regard to quadrant, the singleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values specified for "x" and/or "y". When this prop is false (or false for a given dimension), padding will be applied without regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants. note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. examples: singleQuadrantDomainPadding={false} singleQuadrantDomainPadding={{ x: false }}
standalonebooleanNoThe standalone prop determines whether the component will render a standalone svg or a <g> tag that will be included in an external svg. Set standalone to false to compose ChartAxis with other components within an enclosing <svg> tag.
style{ parent?: { [K in keyof React.CSSProperties]: string | number | ((tick?: any) => string | number); }; axis?: { [K in keyof React.CSSProperties]: string | number | ((tick?: any) => string | number); }; axisLabel?: { [K in keyof React.CSSProperties]: string | number | ((tick?: any) => string | number); }; grid?: { [K in keyof React.CSSProperties]: string | number | ((tick?: any) => string | number); }; ticks?: { [K in keyof React.CSSProperties]: string | number | ((tick?: any) => string | number); }; tickLabels?: { [K in keyof TickLabelProps]: string | number | ((tick?: any) => string | number); }; }NoThe 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.
themeChartThemeDefinitionNogetTheme(themeColor, themeVariant)The theme prop takes a style object with nested data, labels, and parent objects. You can create this object yourself, or you can use a theme provided by When using ChartAxis as a solo component, implement the theme directly on ChartAxis. If you are wrapping ChartAxis in ChartChart or ChartGroup, please call the theme on the outermost wrapper component instead.
themeColorstringNoSpecifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
themeVariantstringNoSpecifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop @example themeVariant={ChartThemeVariant.light}
tickComponentReact.ReactElement<any>NoThe 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.
tickCountnumberNoThe tickCount prop specifies approximately how many ticks should be drawn on the axis if tickValues are not explicitly provided. This value is calculated by d3 scale and prioritizes returning "nice" values and evenly spaced ticks over an exact number of ticks. If you need an exact number of ticks, please specify them via the tickValues prop. This prop must have a value greater than zero.
tickFormatany[] | ((tick: any, index: number, ticks: any[]) => string | number)NoThe tickFormat prop specifies how tick values should be expressed visually. tickFormat can be given as a function to be applied to every tickValue, or as an array of display values for each tickValue. @example d3.time.format("%Y"), (x) => x.toPrecision(2), ["first", "second", "third"]
tickLabelComponentReact.ReactElement<any>NoThe tickLabelComponent prop takes in an entire component which will be used to create the tick labels. The new element created from the passed tickLabelComponent will be supplied with the following properties: x, y, verticalAnchor, textAnchor, angle, tick, style and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If an tickLabelComponent is not supplied, a new ChartLabel will be created with props described above
tickValuesany[]NoThe tickValues prop explicitly specifies which tick values to draw on the axis. @example ["apples", "bananas", "oranges"], [2, 4, 6, 8]
widthnumberNoSpecifies 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 properties
NameTypeRequiredDefaultDescription
allowTooltipbooleanNotrueSpecifies 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.
ariaDescstringNoThe ariaDesc prop specifies the description of the chart/SVG to assist with accessibility for screen readers.
ariaTitlestringNoThe ariaTitle prop specifies the title to be applied to the SVG to assist accessibility for screen readers.
axisComponentReact.ReactElement<any>No<ChartAxis />The axis component to render with the chart
bulletSizenumberNotheme.chart.heightSpecifies 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
comparativeErrorMeasureComponentReact.ReactElement<any>No<ChartBulletComparativeErrorMeasure />The comparative error measure component to render with the chart
comparativeErrorMeasureDataany[]NoThe 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 }]}
comparativeErrorMeasureDataYDataGetterPropTypeNoThe 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; }; }[]NoSpecify 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' }]}
comparativeWarningMeasureComponentReact.ReactElement<any>No<ChartBulletComparativeWarningMeasure />The comparative warning measure component to render with the chart
comparativeWarningMeasureDataany[]NoThe 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 }]}
comparativeWarningMeasureDataYDataGetterPropTypeNoThe 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; }; }[]NoSpecify 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' }]}
comparativeZeroMeasureComponentReact.ReactElement<any>No<ChartBulletComparativeMeasure />The comparative zero measure component to render with the chart
constrainToVisibleAreabooleanNofalseThe 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.
domainDomainPropTypeNogetBulletDomain({ 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. @example {x: [0, 2], y: [0, 100]} Note: The x domain is expected to be `x: [0, 2]` in order to position all measures properly
groupSubTitlestringNoThe subtitle to render for grouped bullets
groupTitlestringNoThe title to render for grouped bullets
groupTitleComponentReact.ReactElement<any>No<ChartBulletGroupTitle />The group title component to render for grouped bullets
heightnumberNohorizontal ? theme.chart.height : theme.chart.widthSpecifies 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.
horizontalbooleanNotrueThe 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.
invertbooleanNofalseInvert the color scales used to represent primary measures and qualitative ranges.
labelsstring[] | number[] | ((data: any) => string | number | null)NoThe 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
legendAllowWrapbooleanNofalseAllows 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>No<ChartLegend />The legend component to render with chart.
legendItemsPerRownumberNoThe 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'Notheme.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'No'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.
maxDomainnumber | { x?: number; y?: number }NoThe maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum domain of a chart is static, while the minimum value depends on data or other variable information. If the domain prop is set in addition to maximumDomain, domain will be used. note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. examples: maxDomain={0} maxDomain={{ y: 0 }} Note: The x domain is expected to be `x: 2` in order to position all measures properly
minDomainnumber | { x?: number; y?: number }NoThe minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum domain of a chart is static, while the maximum value depends on data or other variable information. If the domain prop is set in addition to minimumDomain, domain will be used. note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. examples: minDomain={0} minDomain={{ y: 0 }} Note: The x domain is expected to be `x: 0` in order to position all measures properly
paddingPaddingPropsNoThe 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.
primaryDotMeasureComponentReact.ReactElement<any>No<ChartBulletPrimaryDotMeasure />The primary dot measure component to render with the chart
primaryDotMeasureDataany[]NoThe 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 }]}
primaryDotMeasureDataYDataGetterPropTypeNoThe 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; }; }[]NoSpecify 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' }]}
primarySegmentedMeasureComponentReact.ReactElement<any>No<ChartBulletPrimarySegmentedMeasure />The primary segmented measure component to render with the chart
primarySegmentedMeasureDataany[]NoThe 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 }]}
primarySegmentedMeasureDataYDataGetterPropTypeNoThe 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; }; }[]NoSpecify 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' }]}
qualitativeRangeComponentReact.ReactElement<any>No<ChartBulletQualitativeRange />The qualitative range component to render with the chart
qualitativeRangeDataany[]NoThe 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 }]}
qualitativeRangeDataYDataGetterPropTypeNoThe 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)
qualitativeRangeDataY0DataGetterPropTypeNoUse 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; }; }[]NoSpecify 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' }]}
standalonebooleanNotrueThe 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.
subTitlestringNoThe subtitle for the chart
themeChartThemeDefinitionNogetBulletThemeWithLegendColorScale({ comparativeErrorMeasureData, comparativeErrorMeasureLegendData, comparativeWarningMeasureData, comparativeWarningMeasureLegendData, invert, primaryDotMeasureData, primaryDotMeasureLegendData, primarySegmentedMeasureData, primarySegmentedMeasureLegendData, qualitativeRangeData, qualitativeRangeLegendData, themeColor, themeVariant })The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or props defined in theme may be overwritten by props specified on the component instance.
themeColorstringNoSpecifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
themeVariantstringNoSpecifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop @example themeVariant={ChartThemeVariant.light}
titlestringNoThe title for the chart
titleComponentReact.ReactElement<any>No<ChartBulletTitle />The label component to render the chart title.
titlePosition'left' | 'top-left'NoThe title position relation to the chart. Valid values are 'left', and 'top-left' Note: These properties are only valid for horizontal layouts
widthnumberNohorizontal ? theme.chart.width : theme.chart.heightSpecifies 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 properties
NameTypeRequiredDefaultDescription
childrenReact.ReactElement | React.ReactElement[]NoThe 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. **This prop should not be set manually.**
classNamestringNoThe className prop specifies a className that will be applied to the outer-most div rendered by ChartContainer
containerIdnumber | stringNoThe 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.
containerRefReact.RefObject<HTMLElement>NoThe containerRef prop may be used to attach a ref to the outermost element rendered by the container. @example containerRef={(ref) => { this.chartRef = ref; }}
descstringNoThe 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."
eventsReact.DOMAttributes<any>NoThe 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}`)}}
heightnumberNoThe 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.
namestringNoThe name prop is used to reference a component instance when defining shared events.
originOriginTypeNoVictory components will pass an origin prop is to define the center point in svg coordinates for polar charts. **This prop should not be set manually.**
polarbooleanNoVictory components can pass a boolean polar prop to specify whether a label is part of a polar chart. **This prop should not be set manually.**
portalComponentReact.ReactElementNoThe 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.
portalZIndexnumberNoThe 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.
responsivebooleanNoThe 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.
styleReact.CSSPropertiesNoThe 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}
tabIndexnumberNoThe tabIndex prop specifies the description of the chart/SVG to assist with accessibility.
themeChartThemeDefinitionNogetTheme(themeColor, themeVariant)The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or props defined in theme may be overwritten by props specified on the component instance.
themeColorstringNoSpecifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
themeVariantstringNoSpecifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop @example themeVariant={ChartThemeVariant.light}
titlestringNoThe 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"
widthnumberNoThe 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