Skip to main content

Box Plot

Box plots are used to show the distribution of a dataset. The box represents the interquartile range, the line in the middle is the median, and the whiskers represent the range of the data.

Basic

See the full API here. Typically composed with VictoryChart to create full charts.

Live View
Loading...
Live Editor

Box Plot - Horizontal

Bar charts can be rendered horizontally by setting the horizontal prop to true. This prop can be applied to either VictoryChart or VictoryBoxPlot.

Live View
Loading...
Live Editor

Box Plot - Labels

Box plots can be labeled by setting the labels prop to true. By default this will show all labels. For more granular label control, use the individual minLabels, maxLabels, medianLabels, q1Labels, and q3Labels props.

Live View
Loading...
Live Editor

Specific labels can be chosen by using the appropriate label prop. In this example, the minLabels prop is set to true to show only the minimum value of each box.

Live View
Loading...
Live Editor

Box Plot - Animation

Charts can be animated by setting the animate prop. See the animations guide for more information.

Live View
Loading...
Live Editor

Box Plot - Styles

Chart styling can be customized by using the theme or overriding the style prop on the component.

Live View
Loading...
Live Editor

Box Plot - Events

Events can be handled by passing an array of event objects to the events prop on the component. Each event object should specify a target and an eventHandlers object. See the events guide for more information.

Live View
Loading...
Live Editor

Box Plot - Tooltips

Tooltips are not displayed by default on VictoryBoxPlot; to enable tooltips, use a custom events prop to handle interactions.

Live View
Loading...
Live Editor

Standalone Rendering

Box Plot charts can be rendered outside a VictoryChart.

Live View
Loading...
Live Editor

They can also be embeded in other SVG components by using the standalone prop.

Live View
Loading...
Live Editor