node package manager
Loosely couple your services. Use Orgs to version and reuse your code. Create a free org »


Travis Status Join the chat at


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 and prop-types.

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!


The victory repo aggregates stable victory components that are developed in other repos. The victory repo is only updated with new releases, but the following repos are under very active development.

victory-core victory-chart victory-pie

Please review our Code of Conduct before contributing.

For a detailed contribution guide, please see CONTRIBUTING in the project builder archetype.

# Clone the Victory repo 
$ git clone
cd victory
# Run the demo app server 
$ npm start
# Open the demo app 
$ open http://localhost:3000
# Run checks (lint and tests) 
$ npm test

For more on the development environment, see DEVELOPMENT in the project builder archetype.


This project is in alpha release. We're hard at work fixing bugs and improving the API. Be prepared for breaking changes!

SEMVER Minor version bumps should be considered breaking changes until we hit v1.0.0. Patches can be considered safe.

Caveats git installs using npm 2 may fail in postinstall. If you are consuming Victory via git installs please use npm >=3.0.0


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.