# Victory — Composable React Components for Data Visualization

> A modular charting library for React and React Native. Compose bar, line, area, scatter, and pie charts from simple declarative components with built-in animation.

## Install

Save in your project root:

# Victory — Composable React Components for Data Visualization

## Quick Use
```bash
npm install victory
```
```jsx
import { VictoryBar, VictoryChart, VictoryAxis } from "victory";

const data = [
  { quarter: "Q1", revenue: 13000 },
  { quarter: "Q2", revenue: 16500 },
  { quarter: "Q3", revenue: 14250 },
  { quarter: "Q4", revenue: 19000 },
];

export default function RevenueChart() {
  return (
    <VictoryChart domainPadding={20}>
      <VictoryAxis />
      <VictoryAxis dependentAxis />
      <VictoryBar data={data} x="quarter" y="revenue" />
    </VictoryChart>
  );
}
```

## Introduction
Victory is an opinionated but composable charting library for React. Each chart type is a standalone component that can be combined inside a shared coordinate system. It also supports React Native, making it one of the few charting libraries that work across web and mobile from the same codebase.

## What Victory Does
- Provides composable chart components: bar, line, area, scatter, pie, polar, and more
- Renders charts as SVG elements for crisp resolution at any size
- Animates transitions between data states with spring-based interpolation
- Supports shared axes, tooltips, legends, and voronoi-based hover detection
- Works on both React DOM and React Native with the same API

## Architecture Overview
Victory components render SVG elements and manage their own coordinate systems. A VictoryChart wrapper establishes shared scales and axes, while child components (VictoryBar, VictoryLine, etc.) inherit those scales and render data accordingly. Animations are driven by an interpolation engine that transitions between data snapshots. The library uses a data-prop pattern where each component receives a plain array and accessor functions.

## Self-Hosting & Configuration
- Install the `victory` meta-package or individual sub-packages like `victory-bar`
- Wrap charts in `VictoryChart` to get shared axes and coordinate scaling
- Customize appearance via the `theme` prop using the built-in Material or Grayscale themes
- Override individual styles with the `style` prop on each component
- For React Native, install `victory-native` which uses react-native-svg under the hood

## Key Features
- Cross-platform: same API for React web and React Native
- Composable architecture — mix chart types inside a single coordinate system
- Built-in animation with configurable easing and duration
- Voronoi-based tooltip container for precise hover interactions
- Brush and zoom containers for interactive data exploration

## Comparison with Similar Tools
- **Recharts** — also React + SVG but with a different composition model; Victory offers more layout flexibility and React Native support
- **Chart.js** — canvas-based with a config object API; Victory is declarative with React components
- **D3.js** — low-level building blocks; Victory provides ready-made chart components
- **Nivo** — rich chart types with multiple rendering engines; Victory focuses on composability and cross-platform support

## FAQ
**Q: Does Victory work with React Native?**
A: Yes. Install `victory-native` and `react-native-svg`. The component API is identical to the web version.

**Q: Can I combine different chart types?**
A: Yes. Place multiple Victory components (bar, line, scatter) inside a single VictoryChart for layered visualizations.

**Q: How does animation work?**
A: Victory interpolates between data snapshots. Pass an `animate` prop with duration and easing to enable transitions.

**Q: Is Victory still maintained?**
A: Yes. The project is maintained by Nearform (formerly Formidable) and receives regular updates.

## Sources
- https://github.com/FormidableLabs/victory
- https://commerce.nearform.com/open-source/victory

---
Source: https://tokrepo.com/en/workflows/8e3cf66f-4517-11f1-9bc6-00163e2b0d79
Author: AI Open Source