martincik / victory

A collection of composable React components for building interactive data visualizations

Victory

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

• Getting Started
• Victory Native
• API Documentation
• Guides
• Contributing
• IMPORTANT

• See the docs and examples on the website: http://formidable.com/open-source/victory.
• Experiment with all Victory components in this JSBin or this JSFiddle.
• For support, join the Gitter chat room at https://gitter.im/FormidableLabs/victory.

Getting started

1. Add Victory to your project:

$ npm install victory --save

2. 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'));

3. VictoryPie component will be rendered, and you should see:

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.