victory

Data viz for React

weekly downloads367K

versionv37.3.6

licenseMIT

categorydata-viz

data visualizationReactd3charting

Overview

Victory is a collection of React components for building data visualizations through composition rather than configuration. Instead of passing complex option objects to monolithic chart components, you assemble visualizations from primitive building blocks like VictoryBar, VictoryLine, VictoryAxis, and VictoryScatter. This component-based approach mirrors React's philosophy and provides granular control over every aspect of your charts.

Under the hood, Victory leverages D3 for mathematical calculations while abstracting away its imperative DOM manipulation patterns. The library renders to SVG by default and supports both web (React DOM) and mobile (React Native) platforms with nearly identical APIs. Victory handles responsive sizing, animations, event handling, and accessibility concerns while exposing props-based APIs that feel natural to React developers.

With over 366,000 weekly downloads, Victory is widely adopted in production applications requiring custom data visualizations. It's particularly valuable for teams that need flexibility beyond what template-based charting libraries offer, or when visualizations must integrate tightly with existing React component architectures. The library shines in scenarios where design requirements demand unique chart combinations or heavily customized styling that would be difficult to achieve with configuration-only approaches.

Quick Start

typescript

import React from 'react';
import { VictoryChart, VictoryBar, VictoryLine, VictoryAxis, VictoryTheme, VictoryTooltip, VictoryVoronoiContainer } from 'victory';

const SalesChart = () => {
  const salesData = [
    { quarter: 'Q1', revenue: 13000, target: 15000 },
    { quarter: 'Q2', revenue: 16500, target: 16000 },
    { quarter: 'Q3', revenue: 14800, target: 17000 },
    { quarter: 'Q4', revenue: 19000, target: 18000 }
  ];

  return (
    <VictoryChart
      theme={VictoryTheme.material}
      domainPadding={{ x: 30 }}
      containerComponent={
        <VictoryVoronoiContainer
          labels={({ datum }) => `${datum.quarter}: $${datum.y.toLocaleString()}`}
        />
      }
    >
      <VictoryAxis
        tickValues={[1, 2, 3, 4]}
        tickFormat={['Q1', 'Q2', 'Q3', 'Q4']}
      />
      <VictoryAxis
        dependentAxis
        tickFormat={(x) => `$${x / 1000}k`}
      />
      <VictoryBar
        data={salesData}
        x="quarter"
        y="revenue"
        style={{ data: { fill: '#4A90E2' } }}
        labelComponent={<VictoryTooltip />}
      />
      <VictoryLine
        data={salesData}
        x="quarter"
        y="target"
        style={{
          data: { stroke: '#E24A4A', strokeWidth: 2, strokeDasharray: '5,5' }
        }}
      />
    </VictoryChart>
  );
};

export default SalesChart;

Use Cases

Dashboard applications that display multiple interconnected charts with shared state and coordinated interactions. Victory's component composition makes it straightforward to build complex layouts where user actions in one chart trigger updates across others.

Custom analytical tools requiring non-standard chart types or combinations that don't fit predefined templates. Since Victory exposes primitive components, you can layer different chart types (bars, lines, areas) within a single coordinate system to create hybrid visualizations.

Data-driven storytelling and reports where visual styling must precisely match brand guidelines. Victory's extensive styling props and theme system enable pixel-perfect control over colors, fonts, spacing, and SVG attributes without fighting against opinionated defaults.

React Native mobile applications that need native chart rendering without WebView performance overhead. Victory Native provides the same API as the web version, allowing code sharing between platforms while rendering to react-native-svg for native performance.

Progressive data loading scenarios where charts must gracefully handle streaming or incrementally loaded datasets. Victory's React-based architecture makes it natural to update visualizations as new data arrives through standard state management patterns.

Pros & Cons

Pros

+Component composition model provides exceptional flexibility for custom visualizations and matches React's mental model
+Unified API across React DOM and React Native enables significant code reuse between web and mobile platforms
+Extensive animation support built-in with fine-grained control over transitions, timing, and easing functions
+Strong TypeScript support with comprehensive type definitions for all components and props
+Active maintenance and well-documented API with numerous real-world examples in the official documentation

Cons

−Steeper learning curve compared to configuration-based libraries since you must understand multiple components and their interactions
−Verbose setup for simple charts requires more boilerplate code than libraries with pre-built chart templates
−Bundle size can be large if not using tree-shaking properly, as the full library includes many specialized components
−SVG rendering may encounter performance bottlenecks with extremely large datasets (thousands of data points) compared to Canvas-based solutions
−Limited 3D visualization support focuses primarily on 2D charts and graphs

Alternatives

React charts

Comparisons

recharts vs victory

data-viz

Install

bash

npm install victory

bash

pnpm add victory

bash

bun add victory

Overview

Quick Start

typescript

import React from 'react';
import { VictoryChart, VictoryBar, VictoryLine, VictoryAxis, VictoryTheme, VictoryTooltip, VictoryVoronoiContainer } from 'victory';

const SalesChart = () => {
  const salesData = [
    { quarter: 'Q1', revenue: 13000, target: 15000 },
    { quarter: 'Q2', revenue: 16500, target: 16000 },
    { quarter: 'Q3', revenue: 14800, target: 17000 },
    { quarter: 'Q4', revenue: 19000, target: 18000 }
  ];

  return (
    <VictoryChart
      theme={VictoryTheme.material}
      domainPadding={{ x: 30 }}
      containerComponent={
        <VictoryVoronoiContainer
          labels={({ datum }) => `${datum.quarter}: $${datum.y.toLocaleString()}`}
        />
      }
    >
      <VictoryAxis
        tickValues={[1, 2, 3, 4]}
        tickFormat={['Q1', 'Q2', 'Q3', 'Q4']}
      />
      <VictoryAxis
        dependentAxis
        tickFormat={(x) => `$${x / 1000}k`}
      />
      <VictoryBar
        data={salesData}
        x="quarter"
        y="revenue"
        style={{ data: { fill: '#4A90E2' } }}
        labelComponent={<VictoryTooltip />}
      />
      <VictoryLine
        data={salesData}
        x="quarter"
        y="target"
        style={{
          data: { stroke: '#E24A4A', strokeWidth: 2, strokeDasharray: '5,5' }
        }}
      />
    </VictoryChart>
  );
};

export default SalesChart;

Use Cases

Pros & Cons

Pros

+Component composition model provides exceptional flexibility for custom visualizations and matches React's mental model
+Unified API across React DOM and React Native enables significant code reuse between web and mobile platforms
+Extensive animation support built-in with fine-grained control over transitions, timing, and easing functions
+Strong TypeScript support with comprehensive type definitions for all components and props
+Active maintenance and well-documented API with numerous real-world examples in the official documentation

Cons

−Steeper learning curve compared to configuration-based libraries since you must understand multiple components and their interactions
−Verbose setup for simple charts requires more boilerplate code than libraries with pre-built chart templates
−Bundle size can be large if not using tree-shaking properly, as the full library includes many specialized components
−SVG rendering may encounter performance bottlenecks with extremely large datasets (thousands of data points) compared to Canvas-based solutions
−Limited 3D visualization support focuses primarily on 2D charts and graphs