Victory — Composable React Components for Data Visualization

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