A collection of composable React components for building interactive data visualizations
Clone or download
Latest commit 1c266b4 Dec 12, 2018


Travis Status Join the chat at https://gitter.im/FormidableLabs/victory


an ecosystem of composable React components for building interactive data visualizations.

Getting started

  1. Add Victory to your project:
$ npm install victory --save
  1. Add your first Victory component:
import React, { Component } from 'react';
import { render } from 'react-dom';
import { VictoryPie } from 'victory';

class PieChart extends Component {
  render() {
    return (
      <VictoryPie />

render(<PieChart />, document.getElementById('app'));
  1. VictoryPie component will be rendered, and you should see:



Projects using Victory should also depend on React

Victory Native

Want to use Victory with React Native? Check out victory-native Victory Native shares most of its code with Victory, and has a nearly identical api!



Jest Snapshots

If you want to use Jest snapshot testing with Victory, you may encounter a problem where the Jest snapshot changes every time, due to a randomly generated clipId being used for a VictoryClipContainer group component. The solution to this is to set a static clipId on your VictoryClipContainer.

For example, when creating a VictoryLine component, you can pass a groupComponent prop:

  groupComponent={<VictoryClipContainer clipId={1} />}

Now the clipId attached to your VictoryLine component will always be the same, and your snapshot will not change with each test run.