A collection of composable React components for building interactive data visualizations
JavaScript HTML
Latest commit 2cdfbae Jul 17, 2018
Failed to load latest commit information.
.storybook rename Jul 17, 2018
config nits Jul 16, 2018
demo rename Jul 17, 2018
packages v30.0.0 Jul 17, 2018
stories rename Jul 17, 2018
test GridLine -> LineSegment Jul 17, 2018
.babelrc upgrade to babel 7 Jul 15, 2018
.editorconfig Use Builder Nov 21, 2015
.eslintignore contributing Jul 12, 2018
.eslintrc update linting Jul 16, 2018
.gitignore update specs Jul 11, 2018
.travis.yml yarn ignore-engines Jul 16, 2018
CHANGELOG.md update changelog Jul 17, 2018
CONTRIBUTING.md update contributing Jul 17, 2018
ISSUE_TEMPLATE.md add additonal reproduction options Dec 19, 2017
LICENSE.txt Boilerplate. Nov 3, 2015
README.md travis Jul 15, 2018
lerna.json v30.0.0 Jul 17, 2018
package-scripts.js watch lib and es Jul 17, 2018
package.json correct homepage link Jul 16, 2018
yarn.lock use headless chrome instead of phantom Jul 16, 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 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!



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.