React

Donut utilization

ExamplesProps

Examples

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 donut utilization chart using a Katacoda tutorial starting with a simple chart, adding thresholds, tooltips, 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

Simple donut utilization chart

Copied to clipboard

Simple donut utilization chart with right aligned legend

Copied to clipboard

Simple, inverted donut utilization chart with right aligned legend

Copied to clipboard

Simple, green donut utilization chart with right aligned, vertical legend

Copied to clipboard

Simple donut utilization chart with bottom aligned legend

Copied to clipboard

Donut utilization chart with static thresholds

Copied to clipboard

Donut utilization chart with static thresholds and right aligned legend

Copied to clipboard

Donut utilization chart with inverted static thresholds and right aligned legend

Copied to clipboard

Green donut utilization chart with static thresholds and right aligned (custom) legend

Copied to clipboard

Donut utilization chart with static thresholds and bottom aligned legend

Copied to clipboard

Small donut utilization chart

Copied to clipboard

Small donut utilization chart with right aligned legend

Copied to clipboard

Small donut utilization chart with right aligned legend and bottom aligned subtitle

Copied to clipboard

Small donut utilization chart with bottom aligned legend and right aligned subtitle

Copied to clipboard

Small donut utilization chart with static thresholds

Copied to clipboard

Small donut utilization chart with static thresholds and right aligned legend

Copied to clipboard

Small donut utilization chart with static thresholds with right aligned legend and bottom aligned subtitle

Copied to clipboard

Small donut utilization chart with static thresholds with bottom aligned legend and right aligned subtitle

Copied to clipboard

Donut utilization chart with custom tooltip

This demonstrates an alternate way of applying a custom tooltip for the entire chart

Copied to clipboard

Tips

  • For single data points or zero values, you may want to set the domain prop. See Victory's FAQ
  • ChartLegend may be used as a standalone component, instead of using legendData and legendPosition

Docs

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

ChartLegend props

The ChartLegend component accepts the following props.

NameTypeRequiredDefaultDescription
borderComponentReact.ReactElement<any>The borderComponent prop takes a component instance which will be responsible for rendering a border around the legend. The new element created from the passed borderComponent will be provided with the following properties calculated by ChartLegend: x, y, width, height, and style. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a borderComponent is not provided, ChartLegend will use its default Border component. Please note that the default width and height calculated for the border component is based on approximated text measurements, and may need to be adjusted.
borderPaddingPaddingPropsThe borderPadding specifies the amount of padding that should be added between the legend items and the border. This prop may be given as a number, or asanobject with values specified for top, bottom, left, and right. Please note that the default width and height calculated for the border component is based on approximated text measurements, so padding may need to be adjusted.
centerTitlebooleanThe centerTitle boolean prop specifies whether a legend title should be centered.
colorScaleColorScalePropTypeThe colorScale prop defines a color scale to be applied to each data symbol in ChartLegend. This prop should be given as an array of CSS colors, or as a string corresponding to one of the built in color scales: "grayscale", "qualitative", "heatmap", "warm", "cool", "red", "green", "blue". ChartLegend will assign a color to each symbol by index, unless they are explicitly specified in the data object. Colors will repeat when there are more symbols than colors in the provided colorScale.
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 ChartLegend: height, width, children (the chart itself) and style. Props that are not provided by the child chart component include title and desc, both of which are intended to add accessibility to Victory components. The more descriptive these props are, the more accessible your data will be for people using screen readers. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a dataComponent is not provided, ChartLegend will use the default ChartContainer component. @example <ChartContainer title="Chart of Dog Breeds" desc="This chart shows ..." />
data{ name?: string; 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.
dataComponentReact.ReactElement<any><ChartPoint />The dataComponent prop takes a component instance which will be responsible for rendering a data element used to associate a symbol or color with each data series. The new element created from the passed dataComponent will be provided with the following properties calculated by ChartLegend: x, y, size, style, and symbol. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a dataComponent is not provided, ChartLegend will use its default Point component.
eventKeyStringOrNumberOrCallback | string[]ChartLegend uses the standard eventKey prop to specify how event targets are addressed. This prop is not commonly used.
eventsEventPropTypeInterface<'data' | 'labels' | 'parent', StringOrNumberOrCallback>[]ChartLegend uses the standard events prop.
externalEventMutationsany[]ChartLegend 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
gutternumber | {left: number, right: number}The gutter prop defines the number of pixels between legend rows or columns, depending on orientation. When orientation is horizontal, gutters are between columns. When orientation is vertical, gutters are the space between rows.
heightnumberSpecifies 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.
itemsPerRownumberThe itemsPerRow prop determines how many items to render in each row of a horizontal legend, or in each column of a vertical legend. This prop should be given as an integer. When this prop is not given, legend items will be rendered in a single row or column.
labelComponentReact.ReactElement<any>The labelComponent prop takes a component instance which will be used to render each legend label. The new element created from the passed labelComponent will be supplied with the following properties: x, y, style, and text. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If labelComponent is omitted, a new ChartLabel will be created with the props described above.
orientation'horizontal' | 'vertical'The orientation prop takes a string that defines whether legend data are displayed in a row or column. When orientation is "horizontal", legend items will be displayed in a single row. When orientation is "vertical", legend items will be displayed in a single column. Line and text-wrapping is not currently supported, so "vertical" orientation is both the default setting and recommended for displaying many series of data.
paddingPaddingPropsThe 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.
responsivebooleantrueThe responsive prop specifies whether the rendered container should be a responsive container with a viewBox attribute, or a static container with absolute width and height. Useful when legend is located inside a chart -- default is false. Note: Not compatible with containerComponent prop
rowGutternumber | Omit<BlockProps, 'left' | 'right'>The rowGutter prop defines the number of pixels between legend rows. This prop may be given as a number, or as an object with values specified for “top” and “bottom” gutters. To set spacing between columns, use the gutter prop.
sharedEventsanyThe sharedEvents prop is used internally to coordinate events between components. It should not be set manually.
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 ChartLegend with other components within an enclosing <svg> tag.
styleVictoryStyleInterfaceThe style prop specifies styles for your pie. ChartLegend relies on Radium, so valid Radium style objects should work for this prop. Height, width, and padding should be specified via the height, width, and padding props. @example {data: {stroke: "black"}, label: {fontSize: 10}}
symbolSpacernumberThe symbolSpacer prop defines the number of pixels between data components and label components.
themeChartThemeDefinitiongetTheme(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 ChartLegend as a solo component, implement the theme directly on ChartLegend. If you are wrapping ChartLegend in ChartChart or ChartGroup, please call the theme on the outermost wrapper component instead.
themeColorstringSpecifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
themeVariantstringSpecifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop @example themeVariant={ChartThemeVariant.light}
titlestring | string[]The title prop specifies a title to render with the legend. This prop should be given as a string, or an array of strings for multi-line titles.
titleComponentReact.ReactElement<any>The titleComponent prop takes a component instance which will be used to render a title for the component. The new element created from the passed labelComponent will be supplied with the following properties: x, y, index, data, datum, verticalAnchor, textAnchor, style, text, and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If labelComponent is omitted, a new ChartLabel will be created with the props described above.
titleOrientationOrientationTypesThe titleOrientation prop specifies where the a title should be rendered in relation to the rest of the legend. Possible values for this prop are “top”, “bottom”, “left”, and “right”.
widthnumberSpecifies 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.
xnumberThe x and y props define the base position of the legend element.
ynumberThe x and y props define the base position of the legend element.

ChartDonutUtilization props

The ChartDonutUtilization component accepts the following props.

NameTypeRequiredDefaultDescription
allowTooltipbooleantrueSpecifies 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.
animateAnimatePropTypeInterfaceThe 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
capHeightStringOrNumberOrCallbackThe capHeight prop defines a text metric for the font being used: the expected height of capital letters. This is necessary because of SVG, which (a) positions the *bottom* of the text at `y`, and (b) has no notion of line height. The value should ideally use the same units as `lineHeight` and `dy`, preferably ems. If given a unitless number, it is assumed to be ems.
categoriesCategoryPropTypeThe 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"]
colorScaleColorScalePropTypeThe colorScale prop is an optional prop that defines the color scale the pie will be created on. This prop should be given as an array of CSS colors, or as a string corresponding to one of the built in color scales. ChartDonutUtilization will automatically assign values from this color scale to the pie slices unless colors are explicitly provided in the data object
constrainToVisibleAreabooleanThe 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.
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 ChartDonutUtilization: height, width, children (the chart itself) and style. Props that are not provided by the child chart component include title and desc, both of which are intended to add accessibility to Victory components. The more descriptive these props are, the more accessible your data will be for people using screen readers. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a dataComponent is not provided, ChartDonutUtilization will use the default ChartContainer component. @example <ChartContainer title="Chart of Dog Breeds" desc="This chart shows ..." />
cornerRadiusnumberSet the cornerRadius for every dataComponent (Slice by default) within ChartDonutUtilization
dataanyThe data prop specifies the data to be plotted, where data X-value is the slice label (string or number), and Y-value is the corresponding number value represented by the slice Data should be in the form of a single data point. The data point may be any format you wish (depending on the `x` and `y` accessor props), but by default, an object with x and y properties is expected. Note: The Y-value is expected to represent a percentage @example data={{ x: 'GBps capacity', y: 75 }}
dataComponentReact.ReactElement<any>The dataComponent prop takes an entire, HTML-complete data component which will be used to create slices for each datum in the pie chart. The new element created from the passed dataComponent will have the property datum set by the pie chart for the point it renders; properties style and pathFunction calculated by ChartDonutUtilization; an index property set corresponding to the location of the datum in the data provided to the pie; events bound to the ChartDonutUtilization; and the d3 compatible slice object. If a dataComponent is not provided, ChartDonutUtilization's Slice component will be used.
descstringThe desc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. The more info about the chart provided in the description, the more usable it will be for people using screen readers. This prop defaults to an empty string. Note: Overridden by containerComponent @example "Golden retreivers make up 30%, Labs make up 25%, and other dog breeds are not represented above 5% each."
endAnglenumberThe overall end angle of the pie in degrees. This prop is used in conjunction with startAngle to create a pie that spans only a segment of a circle.
eventKeyStringOrNumberOrCallbackSimilar to data accessor props `x` and `y`, this prop may be used to functionally assign eventKeys to data
eventsEventPropTypeInterface<'data' | 'labels' | 'parent', StringOrNumberOrCallback | string[] | number[]>[]The event prop takes an array of event objects. Event objects are composed of a target, an eventKey, and eventHandlers. Targets may be any valid style namespace for a given component, so "data" and "labels" are all valid targets for ChartDonutUtilization events. The eventKey may optionally be used to select a single element by index rather than an entire set. The eventHandlers object should be given as an object whose keys are standard event names (i.e. onClick) and whose values are event callbacks. The return value of an event handler is used to modify elemnts. The return value should be given as an object or an array of objects with optional target and eventKey keys, and a mutation key whose value is a function. The target and eventKey keys will default to those corresponding to the element the event handler was attached to. The mutation function will be called with the calculated props for the individual selected element (i.e. a single bar), and the object returned from the mutation function will override the props of the selected element via object assignment. @example events={[ { target: "data", eventKey: 1, eventHandlers: { onClick: () => { return [ { eventKey: 2, mutation: (props) => { return {style: merge({}, props.style, {fill: "orange"})}; } }, { eventKey: 2, target: "labels", mutation: () => { return {text: "hey"}; } } ]; } } } ]}
externalEventMutationsany[]ChartDonutUtilization 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
heightnumbertheme.pie.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.
innerRadiusnumberWhen creating a donut chart, this prop determines the number of pixels between the center of the chart and the inner edge.
invertbooleanfalseInvert the threshold color scale used to represent warnings, errors, etc. Instead of showing a warning at 60% and an error at 90%; for example, this would allow users to show a warning below 60% and an error below 20%
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 ChartDonutUtilization. If individual labels are required for each data point, they should be created by composing ChartDonutUtilization with VictoryScatter
labelPosition'startAngle' | 'endAngle' | 'centroid'The labelPosition prop specifies the angular position of each label relative to its corresponding slice. When this prop is not given, the label will be positioned at the centroid of each slice.
legendComponentReact.ReactElement<any>The legend component to render with chart. Note: Use legendData so the legend width can be calculated and positioned properly. Default legend properties may be applied
legendData{ name?: string; symbol?: { fill?: string; type?: string; }; }[]Specify data via the data prop. ChartLegend expects data as an array of objects with name (required), symbol, and labels properties. The data prop must be given as an array. @example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}
legendOrientation'horizontal' | 'vertical'The orientation prop takes a string that defines whether legend data are displayed in a row or column. When orientation is "horizontal", legend items will be displayed in a single row. When orientation is "vertical", legend items will be displayed in a single column. Line and text-wrapping is not currently supported, so "vertical" orientation is both the default setting and recommended for displaying many series of data.
legendPosition'bottom' | 'right'The legend position relation to the donut chart. Valid values are 'bottom' and 'right' Note: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some cases, the legend may not be visible until enough padding is applied.
labelRadiusnumberThe labelRadius prop defines the radius of the arc that will be used for positioning each slice label. If this prop is not set, the label radius will default to the radius of the pie + label padding.
labelsstring[] | ((data: any) => string)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
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. **This prop should not be set manually.**
padAnglenumberThe padAngle prop determines the amount of separation between adjacent data slices in number of degrees
paddingPaddingPropsThe 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.
radiusnumberSpecifies the radius of the chart. If this property is not provided it is computed from width, height, and padding props
sharedEventsanyThe sharedEvents prop is used internally to coordinate events between components. It should not be set manually.
showStaticbooleantrueThis will show the static, unused portion of the donut chart. It should not be set manually.
sortKeystring | string[] | FunctionUse the sortKey prop to indicate how data should be sorted. This prop is given directly to the lodash sortBy function to be executed on the final dataset.
sortOrder'ascending' | 'descending'The sortOrder prop specifies whether sorted data should be returned in ascending or descending order.
standalonebooleantrueThe standalone prop determines whether the component will render a standalone svg or a <g> tag that will be included in an external svg. Set standalone to false to compose ChartDonutUtilization with other components within an enclosing <svg> tag.
startAnglenumberThe overall start angle of the pie in degrees. This prop is used in conjunction with endAngle to create a pie that spans only a segment of a circle.
styleVictoryStyleInterfaceThe style prop specifies styles for your pie. ChartDonutUtilization relies on Radium, so valid Radium style objects should work for this prop. Height, width, and padding should be specified via the height, width, and padding props. @example {data: {stroke: "black"}, label: {fontSize: 10}}
subTitlestringThe subtitle for the donut chart label
subTitleComponentReact.ReactElement<any>The label component to render the chart subTitle. Note: Default label properties may be applied
subTitlePosition'bottom' | 'center' | 'right'The orientation of the donut chart in relation to the legend. Valid values are 'bottom', 'center', and 'right'
themeChartThemeDefinitiongetDonutUtilizationTheme(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 ChartDonutUtilization as a solo component, implement the theme directly on ChartDonutUtilization. If you are wrapping ChartDonutUtilization in ChartChart, ChartGroup, or ChartThreshold please call the theme on the outermost wrapper component instead.
themeColorstringSpecifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
themeVariantstringSpecifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop @example themeVariant={ChartThemeVariant.light}
titlestringThe title for the donut chart label
thresholdsany[]The dynamic portion of the chart will change colors when data reaches the given threshold. Colors may be overridden, but defaults shall be provided. @example thresholds={[{ value: 60, color: '#F0AB00' }, { value: 90, color: '#C9190B' }]}
widthnumbertheme.pie.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.
xDataGetterPropTypeThe 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)
yDataGetterPropTypeThe y prop specifies how to access the Y value of each data point. If given as a function, it will be run on each data point, and returned value will be used. If given as an integer, it will be used as an array index for array-type data points. If given as a string, it will be used as a property key for object-type data points. If given as an array of strings, or a string containing dots or brackets, it will be used as a nested object property path (for details see Lodash docs for _.get). If `null` or `undefined`, the data value will be used as is (identity function/pass-through). @example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)

ChartDonutThreshold props

The ChartDonutThreshold component accepts the following props.

NameTypeRequiredDefaultDescription
allowTooltipbooleantrueSpecifies 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.
animateAnimatePropTypeInterfaceThe 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
categoriesCategoryPropTypeThe 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"]
childrenReact.ReactElement<any>The utilization donut chart to render with the threshold donut chart
colorScaleColorScalePropTypeThe colorScale prop is an optional prop that defines the color scale the pie will be created on. This prop should be given as an array of CSS colors, or as a string corresponding to one of the built in color scales. ChartDonutThreshold will automatically assign values from this color scale to the pie slices unless colors are explicitly provided in the data object
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.
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 ChartDonutThreshold: height, width, children (the chart itself) and style. Props that are not provided by the child chart component include title and desc, both of which are intended to add accessibility to Victory components. The more descriptive these props are, the more accessible your data will be for people using screen readers. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a dataComponent is not provided, ChartDonutThreshold will use the default ChartContainer component. @example <ChartContainer title="Chart of Dog Breeds" desc="This chart shows ..." />
cornerRadiusnumberSet the cornerRadius for every dataComponent (Slice by default) within ChartDonutThreshold
dataany[][]The data prop specifies the data to be plotted, where data X-value is the slice label (string or number), and Y-value is the corresponding number value represented by the slice Data should be in the form of a single data point. The data point may be any format you wish (depending on the `x` and `y` accessor props), but by default, an object with x and y properties is expected. Note: The Y-value is expected to represent a percentage @example data={[{ x: 'Warning at 60%', y: 60 }, { x: 'Danger at 90%', y: 90 }]}
dataComponentReact.ReactElement<any>The dataComponent prop takes an entire, HTML-complete data component which will be used to create slices for each datum in the pie chart. The new element created from the passed dataComponent will have the property datum set by the pie chart for the point it renders; properties style and pathFunction calculated by ChartDonutThreshold; an index property set corresponding to the location of the datum in the data provided to the pie; events bound to the ChartDonutThreshold; and the d3 compatible slice object. If a dataComponent is not provided, ChartDonutThreshold's Slice component will be used.
descstringThe desc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. The more info about the chart provided in the description, the more usable it will be for people using screen readers. This prop defaults to an empty string. Note: Overridden by containerComponent @example "Golden retreivers make up 30%, Labs make up 25%, and other dog breeds are not represented above 5% each."
endAnglenumberThe overall end angle of the pie in degrees. This prop is used in conjunction with startAngle to create a pie that spans only a segment of a circle.
eventKeyStringOrNumberOrCallbackSimilar to data accessor props `x` and `y`, this prop may be used to functionally assign eventKeys to data
eventsEventPropTypeInterface<'data' | 'labels' | 'parent', StringOrNumberOrCallback | string[] | number[]>[]The event prop takes an array of event objects. Event objects are composed of a target, an eventKey, and eventHandlers. Targets may be any valid style namespace for a given component, so "data" and "labels" are all valid targets for ChartDonutThreshold events. The eventKey may optionally be used to select a single element by index rather than an entire set. The eventHandlers object should be given as an object whose keys are standard event names (i.e. onClick) and whose values are event callbacks. The return value of an event handler is used to modify elemnts. The return value should be given as an object or an array of objects with optional target and eventKey keys, and a mutation key whose value is a function. The target and eventKey keys will default to those corresponding to the element the event handler was attached to. The mutation function will be called with the calculated props for the individual selected element (i.e. a single bar), and the object returned from the mutation function will override the props of the selected element via object assignment. @example events={[ { target: "data", eventKey: 1, eventHandlers: { onClick: () => { return [ { eventKey: 2, mutation: (props) => { return {style: merge({}, props.style, {fill: "orange"})}; } }, { eventKey: 2, target: "labels", mutation: () => { return {text: "hey"}; } } ]; } } } ]}
externalEventMutationsany[]ChartDonutThreshold 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
heightnumbertheme.pie.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 height in order to maintain the aspect ratio.
innerRadiusnumberWhen creating a donut chart, this prop determines the number of pixels between the center of the chart and the inner edge.
invertbooleanfalseInvert the threshold color scale used to represent warnings, errors, etc.
labelRadiusnumberThe labelRadius prop defines the radius of the arc that will be used for positioning each slice label. If this prop is not set, the label radius will default to the radius of the pie + label padding.
labelsstring[] | ((data: any) => string)[]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
legendPosition'bottom' | 'right'ChartCommonStyles.legend.position as ChartDonutThresholdLegendPositionThe legend position relation to the donut chart. Valid values are 'bottom' and 'right' Note: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some cases, the legend may not be visible until enough padding is applied.
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. It should not be set manually.**
padAnglenumberThe padAngle prop determines the amount of separation between adjacent data slices in number of degrees
paddingPaddingPropsThe 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.
radiusnumberSpecifies the radius of the chart. If this property is not provided it is computed from width, height, and padding props
sharedEventsanyThe sharedEvents prop is used internally to coordinate events between components. It should not be set manually.
showStaticbooleanThis will show the static, unused portion of the donut chart
sortKeystring | string[] | FunctionUse the sortKey prop to indicate how data should be sorted. This prop is given directly to the lodash sortBy function to be executed on the final dataset.
sortOrder'ascending' | 'descending'The sortOrder prop specifies whether sorted data should be returned in ascending or descending order.
standalonebooleantrueThe standalone prop determines whether the component will render a standalone svg or a <g> tag that will be included in an external svg. Set standalone to false to compose ChartDonutThreshold with other components within an enclosing <svg> tag.
startAnglenumberThe overall start angle of the pie in degrees. This prop is used in conjunction with endAngle to create a pie that spans only a segment of a circle.
styleVictoryStyleInterfaceThe style prop specifies styles for your pie. ChartDonutThreshold relies on Radium, so valid Radium style objects should work for this prop. Height, width, and padding should be specified via the height, width, and padding props. @example {data: {stroke: "black"}, label: {fontSize: 10}}
subTitlestringThe subtitle for the donut chart
subTitlePosition'bottom' | 'center' | 'right'ChartDonutStyles.label.subTitlePosition as ChartDonutThresholdSubTitlePositionThe orientation of the donut chart in relation to the legend. Valid values are 'bottom', 'center', and 'right'
themeChartThemeDefinitiongetDonutThresholdStaticTheme(themeColor, themeVariant, invert)The theme prop takes a style object with nested data, labels, and parent objects. You can create this object yourself, or you can use a theme provided by When using ChartDonutThreshold as a solo component, implement the theme directly on ChartDonutThreshold. If you are wrapping ChartDonutThreshold in ChartChart or ChartGroup, please call the theme on the outermost wrapper component instead.
themeColorstringSpecifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue}
themeVariantstringSpecifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop @example themeVariant={ChartThemeVariant.light}
titlestringThe title for the donut chart
widthnumbertheme.pie.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.
xDataGetterPropTypeThe 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)
yDataGetterPropTypeThe 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)