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

<VictoryChart
  domainPadding={20}
  theme={VictoryTheme.clean}
>
  <VictoryBoxPlot
    boxWidth={15}
    data={[
      { x: 1, y: ["2", "3", "5", "8"] },
      { x: 2, y: ["1", "3", "5", "8"] },
      { x: 3, y: ["2", "5", "7", "9"] },
      { x: 4, y: ["4", "6", "7", "9"] },
      { x: 5, y: ["1", "2", "4", "5"] },
      { x: 6, y: ["1", "2", "6", "8"] },
      { x: 7, y: ["2", "4", "5", "8"] },
      { x: 8, y: ["1", "4", "4", "7"] },
      { x: 9, y: ["2", "5", "7", "9"] },
    ]}
  />
</VictoryChart>

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

<VictoryChart
  horizontal
  domainPadding={20}
  theme={VictoryTheme.clean}
>
  <VictoryBoxPlot
    boxWidth={10}
    data={[
      { x: 1, y: ["2", "3", "5", "8"] },
      { x: 2, y: ["1", "3", "5", "8"] },
      { x: 3, y: ["2", "5", "7", "9"] },
      { x: 4, y: ["4", "6", "7", "9"] },
      { x: 5, y: ["1", "2", "4", "5"] },
      { x: 6, y: ["1", "2", "6", "8"] },
      { x: 7, y: ["2", "4", "5", "8"] },
      { x: 8, y: ["1", "4", "4", "7"] },
      { x: 9, y: ["2", "5", "7", "9"] },
    ]}
  />
</VictoryChart>

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

<VictoryChart
  domainPadding={20}
  theme={VictoryTheme.clean}
>
  <VictoryBoxPlot
    labels
    labelOrientation="right"
    boxWidth={10}
    data={[
      { x: 1, y: ["2", "3", "5", "8"] },
      { x: 2, y: ["1", "3", "5", "8"] },
      { x: 3, y: ["2", "5", "7", "9"] },
      { x: 4, y: ["4", "6", "7", "9"] },
      { x: 5, y: ["1", "2", "4", "5"] },
      { x: 6, y: ["1", "2", "6", "8"] },
    ]}
  />
</VictoryChart>

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

<VictoryChart
  domainPadding={20}
  theme={VictoryTheme.clean}
>
  <VictoryBoxPlot
    minLabels
    boxWidth={10}
    data={[
      { x: 1, y: ["2", "3", "5", "8"] },
      { x: 2, y: ["1", "3", "5", "8"] },
      { x: 3, y: ["2", "5", "7", "9"] },
      { x: 4, y: ["4", "6", "7", "9"] },
      { x: 5, y: ["1", "2", "4", "5"] },
      { x: 6, y: ["1", "2", "6", "8"] },
      { x: 7, y: ["2", "4", "5", "8"] },
      { x: 8, y: ["1", "4", "4", "7"] },
      { x: 9, y: ["2", "5", "7", "9"] },
    ]}
  />
</VictoryChart>

Box Plot - Animation

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

Live View

Loading...

Live Editor

function App() {
  const [data, setData] =
    React.useState(getData());

  React.useState(() => {
    const setStateInterval =
      window.setInterval(() => {
        setData(getData());
      }, 4000);

    return () => {
      window.clearInterval(
        setStateInterval,
      );
    };
  }, []);

  return (
    <VictoryChart
      theme={VictoryTheme.clean}
      domainPadding={{ x: 20 }}
    >
      <VictoryBoxPlot
        animate={{ duration: 1000 }}
        data={data}
        boxWidth={10}
      />
    </VictoryChart>
  );
}

function rr(start, end, count) {
  return _.range(count).map(() =>
    _.random(start, end),
  );
}

function getData() {
  return [
    { x: 1, y: rr(1, 10, 4) },
    { x: 2, y: rr(1, 10, 4) },
    { x: 3, y: rr(1, 10, 4) },
    { x: 4, y: rr(1, 10, 4) },
    { x: 5, y: rr(1, 10, 4) },
    { x: 6, y: rr(1, 10, 4) },
    { x: 7, y: rr(1, 10, 4) },
    { x: 8, y: rr(1, 10, 4) },
    { x: 9, y: rr(1, 10, 4) },
  ];
}

render(<App />);

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

<VictoryChart
  domainPadding={20}
  theme={VictoryTheme.clean}
>
  <VictoryBoxPlot
    labels
    labelOrientation="right"
    boxWidth={10}
    data={[
      { x: 1, y: ["2", "3", "5", "8"] },
      { x: 2, y: ["1", "3", "5", "8"] },
      { x: 3, y: ["2", "5", "7", "9"] },
      { x: 4, y: ["4", "6", "7", "9"] },
      { x: 5, y: ["1", "2", "4", "5"] },
      { x: 6, y: ["1", "2", "6", "8"] },
    ]}
    style={{
      min: { stroke: "tomato" },
      max: { stroke: "orange" },
      q1: { fill: "tomato" },
      q3: { fill: "orange" },
      median: {
        stroke: "white",
        strokeWidth: 2,
      },
      minLabels: { fill: "tomato" },
      maxLabels: { fill: "orange" },
    }}
  />
</VictoryChart>

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

<VictoryChart
  domainPadding={20}
  theme={VictoryTheme.clean}
>
  <VictoryBoxPlot
    labels
    labelOrientation="right"
    boxWidth={10}
    data={[
      { x: 1, y: ["2", "3", "5", "8"] },
      { x: 2, y: ["1", "3", "5", "8"] },
      { x: 3, y: ["2", "5", "7", "9"] },
      { x: 4, y: ["4", "6", "7", "9"] },
      { x: 5, y: ["1", "2", "4", "5"] },
      { x: 6, y: ["1", "2", "6", "8"] },
    ]}
    events={[
      {
        target: "q1",
        eventHandlers: {
          onClick: () => {
            return [
              {
                target: "q1Labels",
                mutation: () => ({
                  text: "LABEL!",
                }),
              },
            ];
          },
        },
      },
      {
        target: "q3",
        eventHandlers: {
          onClick: () => {
            return [
              {
                mutation: (props) => {
                  return {
                    style:
                      Object.assign(
                        props.style,
                        {
                          fill: "tomato",
                        },
                      ),
                  };
                },
              },
            ];
          },
        },
      },
    ]}
  />
</VictoryChart>

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

function App() {
  const activate =
    (label: string) => () =>
      [
        {
          target: label,
          mutation: () => ({
            active: true,
          }),
        },
      ];

  const deactivate =
    (label: string) => () =>
      [
        {
          target: label,
          mutation: () => ({
            active: undefined,
          }),
        },
      ];

  const dataTypes = [
    "min",
    "max",
    "q1",
    "q3",
    "median",
  ];

  const events = dataTypes.map(
    (dataType) => ({
      target: dataType,
      eventHandlers: {
        onMouseOver: activate(
          `${dataType}Labels`,
        ),
        onFocus: activate(
          `${dataType}Labels`,
        ),
        onTouchStart: activate(
          `${dataType}Labels`,
        ),
        onMouseOut: deactivate(
          `${dataType}Labels`,
        ),
        onBlur: deactivate(
          `${dataType}Labels`,
        ),
        onTouchEnd: deactivate(
          `${dataType}Labels`,
        ),
      },
    }),
  );

  return (
    <VictoryBoxPlot
      minLabels
      maxLabels
      q1Labels
      q3Labels
      medianLabels
      events={events}
      minLabelComponent={
        <VictoryTooltip />
      }
      maxLabelComponent={
        <VictoryTooltip />
      }
      q1LabelComponent={
        <VictoryTooltip />
      }
      q3LabelComponent={
        <VictoryTooltip />
      }
      medianLabelComponent={
        <VictoryTooltip />
      }
      data={[
        { x: "red", y: [5, 10, 9, 2] },
        { x: "blue", y: [1, 15, 6, 8] },
        { x: "green", y: [3, 5, 6, 9] },
        {
          x: "yellow",
          y: [5, 20, 8, 12],
        },
        {
          x: "white",
          y: [2, 11, 12, 13],
        },
      ]}
    />
  );
}

render(<App />);

Standalone Rendering

Box Plot charts can be rendered outside a VictoryChart.

Live View

Loading...

Live Editor

<VictoryBoxPlot
  boxWidth={15}
  data={[
    { x: 1, y: ["2", "3", "5", "8"] },
    { x: 2, y: ["1", "3", "5", "8"] },
    { x: 3, y: ["2", "5", "7", "9"] },
    { x: 4, y: ["4", "6", "7", "9"] },
    { x: 5, y: ["1", "2", "4", "5"] },
    { x: 6, y: ["1", "2", "6", "8"] },
    { x: 7, y: ["2", "4", "5", "8"] },
    { x: 8, y: ["1", "4", "4", "7"] },
    { x: 9, y: ["2", "5", "7", "9"] },
  ]}
  theme={VictoryTheme.clean}
/>

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

Live View

Loading...

Live Editor

<svg
  width={300}
  height={300}
  style={{
    display: "block",
    margin: "0 auto",
  }}
>
  <circle
    cx={150}
    cy={150}
    r={150}
    fill="#9ded91"
  />
  <VictoryBoxPlot
    standalone={false}
    theme={VictoryTheme.clean}
    width={300}
    height={300}
    padding={{ left: 10, right: 10 }}
    data={[
      { x: 1, y: ["2", "3", "5", "8"] },
      { x: 2, y: ["1", "3", "5", "8"] },
      { x: 3, y: ["2", "5", "7", "9"] },
      { x: 4, y: ["4", "6", "7", "9"] },
      { x: 5, y: ["1", "2", "4", "5"] },
      { x: 6, y: ["1", "2", "6", "8"] },
      { x: 7, y: ["2", "4", "5", "8"] },
      { x: 8, y: ["1", "4", "4", "7"] },
      { x: 9, y: ["2", "5", "7", "9"] },
    ]}
  />
</svg>