Skip to main content

VictoryBoxPlot

info

For examples of VictoryBoxPlot in action, visit the Box Plot examples.

Inherited Props​

Component Props​

boxWidth​

type: number

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.

Live View
Loading...
Live Editor

data​

type: any[]

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 and y When given in this format, repeated values for x 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​

type: string | number | string[] | number[] | (args: CallbackArgs) => string | number

Specifies how event targets are addressed. This prop is not commonly used. Read about the eventKey prop in more detail here

events​

type: any[]

VictoryBoxPlot uses the standard events prop. Read about it here

See the [Events Guide][] for more information on defining events.

note

valid event targets for VictoryBoxPlot are: "min", "minLabels", "grid", "ticks", and "tickLabels".

Live View
Loading...
Live Editor

labelOrientation​

type: "top" | "bottom" | "left" | "right" | { min, max, median, q1, q3 }

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.

Live View
Loading...
Live Editor

labels​

type: boolean

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​

type: string | string[] | number | (args: CallbackArgs) => string | number

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​

type: ReactElementdefault: <Whisker/>

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​

type: ReactElementdefault: <VictoryLabel/>

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}/>}
Live View
Loading...
Live Editor

maxLabels​

type: boolean | (string|number)[] | (data: any) => string

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​

type: string | string[] | number | (args: CallbackArgs) => string | number

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​

type: ReactElementdefault: <LineSegment/>

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​

type: ReactElementdefault: <VictoryLabel/>

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}/>}
Live View
Loading...
Live Editor

medianLabels​

type: boolean | (string|number)[] | (data: any) => string

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​

type: string | string[] | number | (args: CallbackArgs) => string | number

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​

type: ReactElementdefault: <Whisker/>

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​

type: ReactElementdefault: <VictoryLabel/>

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}/>}
Live View
Loading...
Live Editor

minLabels​

type: boolean | (string|number)[] | (data: any) => string

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​

type: string | string[] | number | (args: CallbackArgs) => string | number

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​

type: ReactElementdefault: <Box/>

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​

type: ReactElementdefault: <VictoryLabel/>

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}/>}
Live View
Loading...
Live Editor

q1Labels​

type: boolean | (string|number)[] | (data: any) => string

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​

type: string | string[] | number | (args: CallbackArgs) => string | number

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​

type: ReactElementdefault: <Box/>

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​

type: ReactElementdefault: <VictoryLabel/>

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}/>}
Live View
Loading...
Live Editor

q3Labels​

type: boolean | (string|number)[] | (data: any) => string

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​

type: VictoryStyleInterfacedefault: (provided by theme)

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.

Live View
Loading...
Live Editor

whiskerWidth​

type: number

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.

Live View
Loading...
Live Editor

Like this project? You'll love working with us.

Contact us to learn more about our full range of services and offerings.

Learn More