Data Selection

Victory allows multiple ways to select data points on a chart. VictorySelectionContainer is a container component that allows users to select data points within a region of a chart. Use VictoryBrushContainer to identify the domain of a selected region.

info

VictorySelectionContainer is similar to VictoryBrushContainer. VictoryBrushContainer may be used to identify the domain of a selected region, whereas VictorySelectionContainer may be used to identify a list of data points within a selected region. VictoryBrushContainer will also create persistent highlighted regions, whereas regions created by VictorySelectionContainer disappear after onMouseUp events.

VictorySelectionContainer

Use VictorySelectionContainer to add data selection behavior to any Victory components that work with an x-y coordinate system.

See the full API here.

Basic

VictorySelectionContainer may be used with any Victory component that works with an x-y coordinate system, and should be added as the containerComponent of the top-level component. However, the component that uses it must be standalone (standalone={true}), which is the default for all top-level Victory components.

Live View

Loading...

Live Editor

<VictoryChart
  containerComponent={
    <VictorySelectionContainer />
  }
  theme={VictoryTheme.clean}
>
  <VictoryScatter
    style={{
      data: {
        fill: ({ active }) =>
          active ? "tomato" : "gray",
      },
    }}
  />
</VictoryChart>

Active Points

The VictorySelectionContainer will automatically set an active prop on the data points that are within the selected region. This prop can be used to style the selected points differently.

Live View

Loading...

Live Editor

<VictoryChart
  horizontal
  theme={VictoryTheme.clean}
  containerComponent={
    <VictorySelectionContainer
      selectionDimension="x"
      selectionStyle={{
        stroke: VictoryTheme.clean.palette?.colors.blue,
        strokeWidth: 2,
        fill: VictoryTheme.clean.palette?.colors.blue,
        fillOpacity: 0.1,
      }}
    />
  }
>
  <VictoryStack>
    <VictoryBar
      style={{
        data: {
          stroke: ({ active }) =>
            active ? VictoryTheme.clean.palette?.colors.purple : "none",
          strokeWidth: 2,
        },
      }}
      data={[
        { x: 1, y: -5 },
        { x: 2, y: 4 },
        { x: 3, y: 2 },
        { x: 4, y: 3 },
        { x: 5, y: 1 },
        { x: 6, y: -3 },
        { x: 7, y: 3 },
      ]}
    />
    <VictoryBar
      style={{
        data: {
          stroke: ({ active }) =>
            active ? VictoryTheme.clean.palette?.colors.purple : "none",
          strokeWidth: 2,
        },
      }}
      data={[
        { x: 1, y: -3 },
        { x: 2, y: 5 },
        { x: 3, y: 3 },
        { x: 4, y: 0 },
        { x: 5, y: -2 },
        { x: 6, y: -2 },
        { x: 7, y: 5 },
      ]}
    />
    <VictoryBar
      style={{
        data: {
          stroke: ({ active }) =>
            active ? VictoryTheme.clean.palette?.colors.purple : "none",
          strokeWidth: 2,
        },
      }}
      data={[
        { x: 1, y: 5 },
        { x: 2, y: -4 },
        { x: 3, y: -2 },
        { x: 4, y: -3 },
        { x: 5, y: -1 },
        { x: 6, y: 3 },
        { x: 7, y: -3 },
      ]}
    />
  </VictoryStack>
</VictoryChart>

Selection Limits

The selectionDimension prop may be used to limit brushing behavior to a single dimension. In the example below, the selectionDimension prop is set to "y", allowing users to select a region of the chart along the y-axis only.

Live View

Loading...

Live Editor

<VictoryChart
  containerComponent={
    <VictorySelectionContainer selectionDimension="y" />
  }
  theme={VictoryTheme.clean}
>
  <VictoryScatter
    style={{
      data: {
        fill: ({ active }) =>
          active ? "tomato" : "gray",
      },
    }}
  />
</VictoryChart>

Events

Use the onSelection prop to define a function that will be called with the selected domain when the selection area changes.

Live View

Loading...

Live Editor

function App() {
  const [selection, setSelection] =
    React.useState({});

  const handleSelection = (
    datasets,
  ) => {
    const points = datasets.reduce(
      (memo, dataset) =>
        memo.concat(dataset.data),
      [],
    );
    setSelection({ points });
  };

  return (
    <VictoryChart
      theme={VictoryTheme.clean}
      containerComponent={
        <VictorySelectionContainer
          selectionDimension="x"
          selectionStyle={{
            stroke:
              VictoryTheme.clean.palette
                ?.colors.red,
            strokeWidth: 2,
            fill: VictoryTheme.clean
              .palette?.colors.red,
            fillOpacity: 0.1,
          }}
          onSelection={handleSelection}
        />
      }
    >
      <VictoryLine
        style={{
          data: {
            stroke:
              VictoryTheme.clean.palette
                ?.colors.purple,
          },
        }}
        data={[
          { x: 1, y: -5 },
          { x: 2, y: 4 },
          { x: 3, y: 2 },
          { x: 4, y: 3 },
          { x: 5, y: 1 },
          { x: 6, y: -3 },
          { x: 7, y: 3 },
        ]}
      />
      <VictoryLine
        style={{
          data: {
            stroke:
              VictoryTheme.clean.palette
                ?.colors.green,
          },
        }}
        data={[
          { x: 1, y: -3 },
          { x: 2, y: 5 },
          { x: 3, y: 3 },
          { x: 4, y: 0 },
          { x: 5, y: -2 },
          { x: 6, y: -2 },
          { x: 7, y: 5 },
        ]}
      />
      <VictoryLine
        style={{
          data: {
            stroke:
              VictoryTheme.clean.palette
                ?.colors.blue,
          },
        }}
        data={[
          { x: 1, y: 5 },
          { x: 2, y: -4 },
          { x: 3, y: -2 },
          { x: 4, y: -3 },
          { x: 5, y: -1 },
          { x: 6, y: 3 },
          { x: 7, y: -3 },
        ]}
      />
      {selection && (
        <VictoryLabel
          x={20}
          y={20}
          text={JSON.stringify(
            selection.points?.map(
              ({ x, y }) => ({ x, y }),
            ),
          )}
        />
      )}
    </VictoryChart>
  );
}

render(<App />);

VictoryBrushContainer

Use VictoryBrushContainer to add highlighting and selection to any Victory components that work with an x-y coordinate system.

See the full API here.

Basic

In the example below, the VictoryBrushContainer component is used to highlight a region of a line chart. The brush behavior is unconstrained by default, allowing users to click and drag to select a region of the chart.

Live View

Loading...

Live Editor

<VictoryLine
  containerComponent={
    <VictoryBrushContainer
      brushStyle={{
        fill: "blue",
        opacity: 0.2,
      }}
    />
  }
  style={{
    data: { stroke: "lightblue" },
  }}
  data={[
    { x: 1, y: -3 },
    { x: 2, y: 5 },
    { x: 3, y: -3 },
    { x: 4, y: 0 },
    { x: 5, y: -5 },
    { x: 6, y: 2 },
    { x: 7, y: 0 },
  ]}
/>

Selection Limits

The brushDimension prop may be used to limit brushing behavior to a single dimension. In the example below, the brushDimension prop is set to "y", allowing users to select a region of the chart along the y-axis only and the brushDomain restricts the highlighted area to the specified range.

Live View

Loading...

Live Editor

<VictoryLine
  containerComponent={
    <VictoryBrushContainer
      brushDomain={{
        x: [1, 7],
        y: [-2, 2],
      }}
      brushDimension="y"
      brushStyle={{
        fill: "blue",
        opacity: 0.2,
      }}
    />
  }
  style={{
    data: { stroke: "lightblue" },
  }}
  data={[
    { x: 1, y: -3 },
    { x: 2, y: 5 },
    { x: 3, y: -3 },
    { x: 4, y: 0 },
    { x: 5, y: -5 },
    { x: 6, y: 2 },
    { x: 7, y: 0 },
  ]}
/>

Events

VictoryBrushContainer exposes several events you can use to access the selection range. In the example below, you can monitor your browser's console to see the events in action.

Live View

Loading...

Live Editor

<VictoryChart
  theme={VictoryTheme.clean}
  containerComponent={
    <VictoryBrushContainer
      onBrushCleared={(domain, props) =>
        console.log(
          "[onBrushCleared]",
          { domain, props },
        )
      }
      onBrushDomainChange={(
        domain,
        props,
      ) =>
        console.log(
          "[onBrushDomainChange]",
          { domain, props },
        )
      }
      onBrushDomainChangeEnd={(
        domain,
        props,
      ) =>
        console.log(
          "[onBrushDomainChangeEnd]",
          { domain, props },
        )
      }
    />
  }
>
  <VictoryGroup>
    <VictoryScatter
      style={{
        data: {
          fill: VictoryTheme.clean
            .palette?.colors.red,
        },
      }}
      data={[
        { x: 1, y: -5 },
        { x: 2, y: 4 },
        { x: 3, y: 2 },
        { x: 4, y: 0 },
        { x: 5, y: 1 },
        { x: 6, y: -3 },
        { x: 7, y: 3 },
      ]}
    />
    <VictoryScatter
      style={{
        data: {
          fill: VictoryTheme.clean
            .palette?.colors.yellow,
        },
      }}
      data={[
        { x: 1, y: -3 },
        { x: 2, y: 5 },
        { x: 3, y: 3 },
        { x: 4, y: 0 },
        { x: 5, y: -2 },
        { x: 6, y: -2 },
        { x: 7, y: 5 },
      ]}
    />
    <VictoryScatter
      data={[
        { x: 1, y: 5 },
        { x: 2, y: -4 },
        { x: 3, y: -2 },
        { x: 4, y: -3 },
        { x: 5, y: -1 },
        { x: 6, y: 3 },
        { x: 7, y: -3 },
      ]}
    />
  </VictoryGroup>
</VictoryChart>