Victory
an ecosystem of composable React components for building interactive data visualizations.
- 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
- Add Victory to your project:
$ npm install victory --save
- 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"));
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.