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

README.md

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

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:

pie

Requirements

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!

Contributing

Issues

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:

<VictoryLine
  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.