victory-voronoi-container

Basic Voronoi Container

This feature allows you to create a basic Voronoi container that displays labels when the user hovers over different regions of the chart. The labels show the x and y values of the data points.

const voronoiContainer = (
  <VictoryVoronoiContainer
    labels={({ datum }) => `x: ${datum.x}, y: ${datum.y}`}
  />
);

Custom Voronoi Container

This feature allows you to customize the Voronoi container by using a custom label component. In this example, a VictoryTooltip component is used to display the labels with a custom flyout style.

const customVoronoiContainer = (
  <VictoryVoronoiContainer
    labels={({ datum }) => `Custom label: ${datum.x}, ${datum.y}`}
    labelComponent={<VictoryTooltip flyoutStyle={{ fill: 'white' }} />}
  />
);

Responsive Voronoi Container

This feature enables the Voronoi container to be responsive, adjusting to different screen sizes and orientations. The labels still display the x and y values of the data points.

const responsiveVoronoiContainer = (
  <VictoryVoronoiContainer
    responsive={true}
    labels={({ datum }) => `x: ${datum.x}, y: ${datum.y}`}
  />
);