Victory

Victory is a collection of composable React components designed for building interactive data visualizations. It is highly opinionated to provide sensible defaults but is fully overridable to allow for deep customization. You can build complex charts by composing various components like VictoryChart, VictoryAxis, VictoryLine, and VictoryLegend together.

import { VictoryChart, VictoryLine, VictoryAxis, VictoryLegend } from 'victory';

function App() {
  return (
    <VictoryChart>
      <VictoryLine data={[{ x: 1, y: 2 }, { x: 2, y: 3 }]} />
      <VictoryAxis />
    </VictoryChart>
  );
}

The victory-bar package provides the VictoryBar and Bar components for rendering bar charts.

Note: Detailed documentation and specific API props for these components can be found in the official Victory documentation at https://commerce.nearform.com/open-source/victory/docs/victory-bar.

import { VictoryBar } from 'victory-bar';

The victory-area package provides the VictoryArea and Area components for rendering area charts. These components are used to create shaded regions under a line or between multiple data series.

To use these components, install the package via npm or yarn and import them from victory-area.

import { VictoryArea } from 'victory-area';

victory-brush-container provides the VictoryBrushContainer component, which is used to implement brush-based zooming and panning interactions in Victory charts.

It exports the following primary entities:

• VictoryBrushContainer: The main component for managing brush interactions.
• brushContainerMixin: A mixin for adding brush container functionality to other components.
• BrushHelpers: Utility functions to assist with brush operations.

The victory-voronoi-container package provides VictoryVoronoiContainer, which is used to enhance Victory charts with Voronoi-based interaction. This allows for more precise mouse/touch interaction by calculating the nearest data point within a Voronoi diagram, rather than relying on exact coordinate matches.

The package exports:

• VictoryVoronoiContainer: The container component used to wrap charts.
• voronoiContainerMixin: A mixin for creating custom components with Voronoi capabilities.
• VoronoiHelpers: Utility functions for Voronoi calculations.

The victory-selection-container package provides tools for implementing selection logic within Victory charts. It exports three primary entities:

• VictorySelectionContainer: A component used to wrap charts to enable selection capabilities.
• selectionContainerMixin: A mixin for adding selection container functionality to existing components.
• SelectionHelpers: A set of utility functions to assist with selection logic.

For detailed API documentation and usage guides, refer to the official Victory documentation at https://commerce.nearform.com/open-source/victory/docs/victory-selection-container.

The victory-tooltip package provides the VictoryTooltip and Flyout components for displaying information overlays in Victory charts.

To use these components, ensure you have installed victory-tooltip@^30.0.0 or later.

import { VictoryTooltip, Flyout } from 'victory-tooltip';

The victory-cursor-container package provides VictoryCursorContainer, cursorContainerMixin, and CursorHelpers. This package is used to manage and display cursor-related interactions within Victory charts.

To use these features, install the package:

npm install victory-cursor-container@^30.0.0

For detailed API documentation and usage guides, refer to the official Victory documentation at https://commerce.nearform.com/open-source/victory/docs/victory-cursor-container.

The victory-pie package provides components for rendering pie charts. It exports the VictoryPie component for the main chart and the Slice component for individual segments.

Ensure you install the package version compatible with your project (e.g., victory-pie@^30.0.0).

npm install victory-pie@^30.0.0

VictoryBrushLine is a component exported from the victory-brush-line package. It is used to create brush-line visualizations within the Victory ecosystem.

To use this component, ensure you have installed the package version ^30.0.0 or higher.

import { VictoryBrushLine } from 'victory-brush-line';