victory

What is victory?

Victory is a collection of composable React components for building interactive data visualizations. It provides a wide range of chart types and is designed to be highly customizable and easy to use.

What are victory's main functionalities?

Line Chart

Victory allows you to create line charts easily. The code sample demonstrates how to create a simple line chart using VictoryLine and VictoryChart components.

const data = [
  { x: 1, y: 2 },
  { x: 2, y: 3 },
  { x: 3, y: 5 },
  { x: 4, y: 4 },
  { x: 5, y: 7 }
];

<VictoryChart>
  <VictoryLine data={data} />
</VictoryChart>

Bar Chart

Victory makes it simple to create bar charts. The code sample shows how to create a bar chart using VictoryBar and VictoryChart components.

const data = [
  { x: 'A', y: 2 },
  { x: 'B', y: 3 },
  { x: 'C', y: 5 },
  { x: 'D', y: 4 },
  { x: 'E', y: 7 }
];

<VictoryChart>
  <VictoryBar data={data} />
</VictoryChart>

Pie Chart

VictoryPie component allows you to create pie charts. The code sample demonstrates how to create a pie chart with different categories.

const data = [
  { x: 'Cats', y: 35 },
  { x: 'Dogs', y: 40 },
  { x: 'Birds', y: 25 }
];

<VictoryPie data={data} />

Scatter Plot

VictoryScatter component is used to create scatter plots. The code sample shows how to create a scatter plot using VictoryScatter and VictoryChart components.

const data = [
  { x: 1, y: 2 },
  { x: 2, y: 3 },
  { x: 3, y: 5 },
  { x: 4, y: 4 },
  { x: 5, y: 7 }
];

<VictoryChart>
  <VictoryScatter data={data} />
</VictoryChart>

Other packages similar to victory

recharts

Recharts is a Redefined chart library built with React and D3. It provides a set of composable chart components that are easy to use and highly customizable. Compared to Victory, Recharts has a more extensive set of chart types and is known for its performance and ease of integration.

nivo

Nivo provides a rich set of dataviz components, built on top of D3 and React. It offers a wide range of chart types and is highly customizable. Nivo is known for its beautiful and responsive charts, and it provides a variety of themes and styles out of the box. Compared to Victory, Nivo offers more advanced features and better aesthetics.

react-chartjs-2

React wrapper for Chart.js, a popular JavaScript charting library. It provides a simple way to create charts using Chart.js in React applications. Compared to Victory, react-chartjs-2 is more lightweight and leverages the powerful Chart.js library for rendering charts.

README

Victory

Victory is an opinionated, but fully overridable, ecosystem of composable React components for building interactive data visualizations. This repo aggregates all of the stable Victory components so they can be conveniently included.

See the docs and examples on the website: http://victory.formidable.com.

You can also join the Gitter chat room at https://gitter.im/FormidableLabs/victory.

Important: 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.

Get 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:

Including components:

Components can be included individually

import {VictoryLine, VictoryAxis} from "victory"

<VictoryLine/>

Or imported as a set:

import * as V from "victory"

<V.VictoryLine/>

Components

You can read about these Victory components via interactive docs!

• VictoryAxis
• VictoryBar
• VictoryChart
• VictoryLine
• VictoryPie
• VictoryScatter
• VictoryLabel
• VictoryAnimation

Animation

Wrap any Victory component with VictoryAnimation and it will transition smoothly between states whenever data changes. VictoryAnimation relies on d3's interpolator, so it knows how to transitions between colors, dates, numbers, strings etc.

Contributing

Please see CONTRIBUTING in the project builder archetype.

# Clone the Victory repo
$ git clone [e-mail]:FormidableLabs/victory.git
$ 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.

Roadmap

Please see ROADMAP

Changelog

0.6.0 (2016-04-15)

BREAKING CHANGES

• VictoryBar and VictoryArea no longer support multiple datasets.
• VictoryStack and VictoryGroup define stacked and grouped layouts for their children
• Custom data components supported on for VictoryBar, VictoryLine, VictoryScatter, VictoryArea, and VictoryPie via the dataComponent prop
• Enter and exit transitions animate. Enter and exit transition defaults defined VictoryBar, VictoryArea, VictoryScatter, VictoryLine and VictoryPie. Custom transitions may be defined via the onExit and onEnter properties of the animation prop
• Top level svgs are all responsive by default (using svg viewBox). To render a fixed size component, set the standalone prop to false and render the component inside an svg tag