VictoryBoxPlot
For examples of VictoryBoxPlot
in action, visit the Box Plot examples.
Inherited Props
VictoryDatableProps
- dataoverridden
VictoryCommonProps
Component Props
boxWidth
The boxWidth
prop specifies how wide each box should be. If the whiskerWidth
prop is not set, this prop will also determine the width of the whisker crosshair.
<VictoryChart domainPadding={10} theme={VictoryTheme.clean} > <VictoryBoxPlot boxWidth={10} whiskerWidth={5} data={[ { x: 1, y: [1, 2, 3, 5] }, { x: 2, y: [3, 2, 8, 10] }, { x: 3, y: [2, 8, 6, 5] }, { x: 4, y: [1, 3, 2, 9] }, ]} /> </VictoryChart>
data
The data
prop for VictoryBoxPlot
may be given in a a variety of formats:
- As an array of standard data objects with values specified for
x
andy
When given in this format, repeated values forx
will be used for calculating summary statistics
data={[
{ x: 1, y: 2 },
{ x: 1, y: 3 },
{ x: 1, y: 5 },
{ x: 2, y: 1 },
{ x: 2, y: 4 },
{ x: 2, y: 5 },
...
]}
- As an array of data objects where
y
is given as an array of values When given in this format, array values are used for calculating summary statistics.
data={[
{ x: 1, y: [1, 2, 3, 5] },
{ x: 2, y: [3, 2, 8, 10] },
{ x: 3, y: [2, 8, 6, 5] },
{ x: 4, y: [1, 3, 2, 9] }
]}
- As an array of data objects with pre-calculated summary statistics(
min
,median
,max
,q1
,q3
) When given in this format,VictoryBoxPlot
will not perform statistical analysis. Pre-calculating summary statistics for large datasets will improve performance.
data={[
{ x: 1, min: 2, median: 5, max: 10, q1: 3, q3: 7 },
{ x: 2, min: 1, median: 4, max: 9, q1: 3, q3: 6 },
{ x: 3, min: 1, median: 6, max: 12, q1: 4, q3: 10 },
}]
Use the [x
][], [y
][], [min
][], [max
][], [median
][], [q1
][], and [q3
][] data accessor props to specify custom data formats. Refer to the [Data Accessors Guide][] for more detail.
eventKey
Specifies how event targets are addressed. This prop is not commonly used. Read about the eventKey
prop in more detail here
events
VictoryBoxPlot
uses the standard events
prop. Read about it here
See the [Events Guide][] for more information on defining events.
valid event targets for VictoryBoxPlot
are:
"min", "minLabels", "grid", "ticks", and "tickLabels".
<div> <h3>Click a data bar below</h3> <VictoryBoxPlot medianLabels={() => null} events={[ { target: "q3", eventHandlers: { onClick: () => { return [ { mutation: (props) => { return { style: Object.assign( props.style, { fill: "tomato", }, ), }; }, }, ]; }, }, }, ]} data={[ { x: 1, y: [1, 2, 3, 5] }, { x: 2, y: [3, 2, 8, 10] }, { x: 3, y: [2, 8, 6, 5] }, { x: 4, y: [1, 3, 2, 9] }, ]} theme={VictoryTheme.clean} /> </div>
labelOrientation
The labelOrientation
prop determines where labels are placed relative to their corresponding data. If this prop is not set, it will be set to "top" for horizontal charts, and "right" for vertical charts.
<VictoryChart horizontal domainPadding={20} theme={VictoryTheme.clean} > <VictoryBoxPlot labels labelOrientation="top" data={[ { x: 1, y: [1, 2, 3, 5] }, { x: 2, y: [3, 2, 8, 10] }, { x: 3, y: [2, 8, 6, 5] }, { x: 4, y: [1, 3, 2, 9] }, ]} /> </VictoryChart>
labels
When the boolean labels
prop is set to true
, the values for min
, max
, median
, q1
, and q3
will be displayed for each box. For more granular label control, use the individual [minLabels
][], [maxLabels
][], [medianLabels
][], [q1Labels
][], and [q3Labels
][] props.
max
Defines the max value of a box plot.
string: specify which property in an array of data objects should be used as the max value
examples: max="max_value"
function: use a function to translate each element in a data array into a max value
examples: max={() => 10}
path string or path array: specify which property in an array of nested data objects should be used as a max value
examples: max="bonds.max"
, max={["bonds", "max"]}
maxComponent
The maxComponent
prop takes a component instance which will be responsible for rendering an element to represent the maximum value of the box plot. The new element created from the passed maxComponent
will be provided with the following props calculated by VictoryBoxPlot
: datum
, index
, scale
, style
, events
, majorWhisker
and minorWhisker
. The majorWhisker
and minorWhisker
props are given as objects with values for x1
, y1
, x2
and y2
that describes the lines that make up the major and minor whisker. 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 maxComponent
is not provided, VictoryBoxPlot
will use its default [Whisker component][].
See the [Custom Components Guide][] for more detail on creating your own components
maxComponent={<Whisker events={{ onClick: handleClick }}/>}
maxLabelComponent
The maxLabelComponent
prop takes a component instance which will be used to render the label corresponding to the maximum value for each box. The new element created from the passed maxLabelComponent
will be supplied with the following props: x
, y
, datum
, index
, scale
, 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 maxLabelComponent
is omitted, a new [VictoryLabel
][] will be created with props described above.
See the [Custom Components Guide][] for more detail on creating your own components
maxLabelComponent={<VictoryLabel dy={20}/>}
<VictoryBoxPlot data={[ { x: 1, y: [1, 2, 3, 5] }, { x: 2, y: [3, 2, 8, 10] }, { x: 3, y: [2, 8, 6, 5] }, { x: 4, y: [1, 3, 2, 9] }, ]} maxLabels maxLabelComponent={ <VictoryLabel dx={-10} dy={-10} textAnchor="middle" /> } theme={VictoryTheme.clean} />
maxLabels
The maxLabels
prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the max value of each datum will be used for the label.
Common Usage
maxLabels
maxLabels={["first", "second", "third"]}
maxLabels={({ datum }) => Math.round(datum.max)}
median
Use the median
data accessor prop to define the median value of a box plot.
string: specify which property in an array of data objects should be used as the median value
examples: median="median_value"
function: use a function to translate each element in a data array into a median value
examples: median={() => 10}
path string or path array: specify which property in an array of nested data objects should be used as a median value
examples: median="bonds.median"
, median={["bonds", "median"]}
medianComponent
The medianComponent
prop takes a component instance which will be responsible for rendering an element to represent the median value of the box plot. The new element created from the passed medianComponent
will be provided with the following props calculated by VictoryBoxPlot
: datum
, index
, scale
, style
, events
, x1
, y1
, x2
and y2
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 medianComponent
is not provided, VictoryBoxPlot
will use its default [Line component][].
See the [Custom Components Guide][] for more detail on creating your own components
medianComponent={<LineSegment events={{ onClick: handleClick }}/>}
medianLabelComponent
The medianLabelComponent
prop takes a component instance which will be used to render the label corresponding to the median value for each box. The new element created from the passed medianLabelComponent
will be supplied with the following props: x
, y
, datum
, index
, scale
, 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 medianLabelComponent
is omitted, a new [VictoryLabel
][] will be created with props described above.
See the [Custom Components Guide][] for more detail on creating your own components
medianLabelComponent={<VictoryLabel dy={20}/>}
<VictoryBoxPlot data={[ { x: 1, y: [1, 2, 3, 5] }, { x: 2, y: [3, 2, 8, 10] }, { x: 3, y: [2, 8, 6, 5] }, { x: 4, y: [1, 3, 2, 9] }, ]} medianLabels medianLabelComponent={ <VictoryLabel dx={-10} dy={-10} textAnchor="middle" /> } theme={VictoryTheme.clean} />
medianLabels
The medianLabels
prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the median value of each datum will be used for the label.
Common Usage
medianLabels
medianLabels={["first", "second", "third"]}
medianLabels={({ datum }) => Math.round(datum.median)}
min
Use the min
data accessor prop to define the min value of a box plot.
string: specify which property in an array of data objects should be used as the min value
examples: min="min_value"
function: use a function to translate each element in a data array into a min value
examples: min={() => 10}
path string or path array: specify which property in an array of nested data objects should be used as a min value
examples: min="bonds.min"
, min={["bonds", "min"]}
minComponent
The minComponent
prop takes a component instance which will be responsible for rendering an element to represent the minimum value of the box plot. The new element created from the passed minComponent
will be provided with the following props calculated by VictoryBoxPlot
: datum
, index
, scale
, style
, events
, majorWhisker
and minorWhisker
. The majorWhisker
and minorWhisker
props are given as objects with values for x1
, y1
, x2
and y2
that describes the lines that make up the major and minor whisker. 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 minComponent
is not provided, VictoryBoxPlot
will use its default [Whisker component][].
See the [Custom Components Guide][] for more detail on creating your own components
minComponent={<Whisker events={{ onClick: handleClick }}/>}
minLabelComponent
The minLabelComponent
prop takes a component instance which will be used to render the label corresponding to the minimum value for each box. The new element created from the passed minLabelComponent
will be supplied with the following props: x
, y
, datum
, index
, scale
, 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 minLabelComponent
is omitted, a new [VictoryLabel
][] will be created with props described above.
See the [Custom Components Guide][] for more detail on creating your own components
minLabelComponent={<VictoryLabel dy={20}/>}
<VictoryBoxPlot data={[ { x: 1, y: [1, 2, 3, 5] }, { x: 2, y: [3, 2, 8, 10] }, { x: 3, y: [2, 8, 6, 5] }, { x: 4, y: [1, 3, 2, 9] }, ]} minLabels minLabelComponent={ <VictoryLabel dx={-10} dy={10} textAnchor="middle" /> } theme={VictoryTheme.clean} />
minLabels
The minLabels
prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the min value of each datum will be used for the label.
Common Usage
minLabels
minLabels={["first", "second", "third"]}
minLabels={({ datum }) => Math.round(datum.min)}
q1
Use the q1
data accessor prop to define the q1 value of a box plot.
string: specify which property in an array of data objects should be used as the q1 value
examples: q1="q1_value"
function: use a function to translate each element in a data array into a q1 value
examples: q1={() => 10}
path string or path array: specify which property in an array of nested data objects should be used as a q1 value
examples: q1="bonds.q1"
, q1={["bonds", "q1"]}
q1Component
The q1Component
prop takes a component instance which will be responsible for rendering an element to represent the q1 value of the box plot. The new element created from the passed q1Component
will be provided with the following props calculated by VictoryBoxPlot
: datum
, index
, scale
, style
, events
, x
, y
, width
and height
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 q1Component
is not provided, VictoryBoxPlot
will use its default [Box component][].
See the [Custom Components Guide][] for more detail on creating your own components
q1Component={<Box events={{ onClick: handleClick }}/>}
q1LabelComponent
The q1LabelComponent
prop takes a component instance which will be used to render the label corresponding to the q1 value for each box. The new element created from the passed q1LabelComponent
will be supplied with the following props: x
, y
, datum
, index
, scale
, 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 q1LabelComponent
is omitted, a new [VictoryLabel
][] will be created with props described above.
See the [Custom Components Guide][] for more detail on creating your own components
q1LabelComponent={<VictoryLabel dy={20}/>}
<VictoryBoxPlot data={[ { x: 1, y: [1, 2, 3, 5] }, { x: 2, y: [3, 2, 8, 10] }, { x: 3, y: [2, 8, 6, 5] }, { x: 4, y: [1, 3, 2, 9] }, ]} q1Labels q1LabelComponent={ <VictoryLabel dx={5} dy={5} /> } theme={VictoryTheme.clean} />
q1Labels
The q1Labels
prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the q1 value of each datum will be used for the label.
Common Usage
q1Labels
q1Labels={["first", "second", "third"]}
q1Labels={({ datum }) => Math.round(datum.q1)}
q3
Use the q3
data accessor prop to define the q3 value of a box plot.
string: specify which property in an array of data objects should be used as the q3 value
examples: q3="q3_value"
function: use a function to translate each element in a data array into a q3 value
examples: q3={() => 10}
path string or path array: specify which property in an array of nested data objects should be used as a q3 value
examples: q3="bonds.q3"
, q3={["bonds", "q3"]}
q3Component
The q3Component
prop takes a component instance which will be responsible for rendering an element to represent the q3 value of the box plot. The new element created from the passed q3Component
will be provided with the following props calculated by VictoryBoxPlot
: datum
, index
, scale
, style
, events
, x
, y
, width
and height
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 q3Component
is not provided, VictoryBoxPlot
will use its default [Box component][].
See the [Custom Components Guide][] for more detail on creating your own components
q3Component={<Box events={{ onClick: handleClick }}/>}
q3LabelComponent
The q3LabelComponent
prop takes a component instance which will be used to render the label corresponding to the q3 value for each box. The new element created from the passed q3LabelComponent
will be supplied with the following props: x
, y
, datum
, index
, scale
, 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 q3LabelComponent
is omitted, a new [VictoryLabel
][] will be created with props described above.
See the [Custom Components Guide][] for more detail on creating your own components
q3LabelComponent={<VictoryLabel dy={20}/>}
<VictoryBoxPlot data={[ { x: 1, y: [1, 2, 3, 5] }, { x: 2, y: [3, 2, 8, 10] }, { x: 3, y: [2, 8, 6, 5] }, { x: 4, y: [1, 3, 2, 9] }, ]} q3Labels q3LabelComponent={ <VictoryLabel dx={5} dy={5} /> } theme={VictoryTheme.clean} />
q3Labels
The q3Labels
prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the q3 value of each datum will be used for the label.
Common Usage
q3Labels
q3Labels={["first", "second", "third"]}
q3Labels={({ datum }) => Math.round(datum.q3)}
style
Defines the style of the component using VictoryBoxPlotStyleInterface
.
type VictoryBoxPlotStyleInterface = {
parent: object,
max: object,
maxLabels: object,
min: object,
minLabels: object,
median: object,
medianLabels: object,
q1: object,
q1Labels: object,
q3: object,
q3Labels: object
}
The style
prop defines the style of the component. The style prop should be given as an object with styles defined for parent
, max
, maxLabels
, min
, minLabels
,median
, medianLabels
,q1
, q1Labels
,q3
, q3Labels
. Any valid svg styles are supported, but width
, height
, and padding
should be specified via props as they determine relative layout for components in VictoryChart. Functional styles may be defined for style properties, and they will be evaluated with the props corresponding to each element.
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.
<VictoryBoxPlot minLabels maxLabels data={[ { x: 1, y: [1, 2, 3, 5] }, { x: 2, y: [3, 2, 8, 10] }, { x: 3, y: [2, 8, 6, 5] }, { x: 4, y: [1, 3, 2, 9] }, ]} style={{ min: { stroke: "tomato" }, max: { stroke: "orange" }, q1: { fill: "tomato" }, q3: { fill: "orange" }, median: { stroke: "white", strokeWidth: 2, }, minLabels: { fill: "tomato" }, maxLabels: { fill: "orange" }, }} />
whiskerWidth
The whiskerWidth
prop specifies how wide each whisker crosshair should be. If the whiskerWidth
prop is not set, the width of the whisker crosshair will match the width of the box.
<VictoryChart domainPadding={10} theme={VictoryTheme.clean} > <VictoryBoxPlot boxWidth={10} whiskerWidth={5} data={[ { x: 1, y: [1, 2, 3, 5] }, { x: 2, y: [3, 2, 8, 10] }, { x: 3, y: [2, 8, 6, 5] }, { x: 4, y: [1, 3, 2, 9] }, ]} /> </VictoryChart>