VictorySelectionContainer

Enables selecting data points within a highlighted region.

info

For examples of VictorySelectionContainer in action, visit the containers guide.

Inherited Props

VictoryContainerProps

• aria-describedby
• aria-labelledby
• children
• className
• containerId
• containerRef
• desc
• events
• height
• name
• origin
• ouiaId
• ouiaSafe
• ouiaType
• polar
• portalComponent
• portalZIndex
• preserveAspectRatio
• responsive
• role
• scale
• style
• tabIndex
• theme
• title
• width

Component Props

---

activateSelectedData

type: booleandefault: true

When the activateSelectedData prop is set to true, the active prop will be set to true on all selected data points. When this prop is set to false, the onSelection and onSelectionCleared callbacks will still fire, but no mutations will occur via Victory's event system.

---

disable

type: boolean

When the disable prop is set to true, VictorySelectionContainer events will not fire.

---

onSelection

type: function

The onSelection prop accepts a function to be called whenever new data points are selected. The function is called with the parameters points (an array of objects with childName, eventKey, and data), bounds (an object with min / max arrays specified for x and y), and props (the props used by VictorySelectionContainer)

example: onSelection={(points, bounds, props) => handleSelection(points, bounds, props)}

---

onSelectionCleared

type: function

The onSelectionCleared prop accepts a function to be called whenever the selection is cleared. The function is called with the props used by VictorySelectionContainer

example: onSelectionCleared={(props) => handleSelectionCleared(props)}

selectionBlacklist

type: array[string]

type: function

The selectionBlacklist prop is used to exclude data from potential selections. This prop should be given as an array of strings that match the name prop of Victory component that should be excluded from selection.

example: selectionBlackList={["first-line", "second-line"]}

---

selectionComponent

type: ReactElementdefault: <rect/>

The selectionComponent prop specifies the element to be rendered for the selected area. When this prop is not specified, a <rect/> will be rendered. This component will be supplied with the following props: x, y, width, height, and style.

---

selectionDimension

type: "x" | "y"`

When the selectionDimension prop is set, the selection will only take the given dimension into account. For example, when dimension is set to "x", the selected area will cover the entire y domain regardless of mouse position.

example: selectionDimension="x"

Live View

Loading...

Live Editor

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

---

selectionStyle

type: objectdefault: {stroke: "transparent", fill: "black", fillOpacity: 0.1}

The selectionStyle prop should be given as an object of style attributes to be applied to the selectionComponent

Live View

Loading...

Live Editor

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