victory-voronoi-container

What is victory-voronoi-container?

The victory-voronoi-container package is a part of the Victory library, which provides a set of modular charting components for React. The victory-voronoi-container specifically allows for the creation of Voronoi overlays, which can be used to enhance data visualization by providing interactive regions that respond to user interactions such as mouse events.

What are victory-voronoi-container's main functionalities?

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}`}
  />
);

Other packages similar to victory-voronoi-container

react-chartjs-2

react-chartjs-2 is a React wrapper for Chart.js, a popular JavaScript charting library. While it does not provide Voronoi overlays, it offers a wide range of chart types and interactive features. It is more focused on general charting capabilities rather than specialized overlays like victory-voronoi-container.

recharts

Recharts is a composable charting library built on React components. It provides a variety of chart types and interactive features, including tooltips and legends. While it does not specifically offer Voronoi overlays, it is a powerful alternative for creating interactive and responsive charts.

nivo

Nivo provides a rich set of dataviz components, built on top of D3 and React. It offers a wide range of chart types and is highly customizable. Nivo includes interactive features such as tooltips and legends, but does not specifically focus on Voronoi overlays like victory-voronoi-container.

README

VictoryVoronoiContainer

victory-voronoi-container@^30.0.0 exports VictoryVoronoiContainer, voronoiContainerMixin and VoronoiHelpers

To view documentation for VictoryVoronoiContainer please see https://formidable.com/open-source/victory/docs/victory-voronoi-container

To suggest an addition or correction to this documentation please see https://github.com/FormidableLabs/victory-docs/blob/master/src/content/docs/victory-voronoi-container.md

Changelog

34.3.7 (2020-05-22)

• #1576 - Add more types for primitive components. Thanks @maddles