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 Documentation

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:

For detailed documentation and examples please see Victory Documentation

Requirements

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!

Contributing

Changelog

36.4.0 (2022-05-10)

• Added the ability to add victory charts title and desc props for better accessibility by @shankstee in https://github.com/FormidableLabs/victory/pull/2199

• Bump axios from 0.19.2 to 0.21.2 in /docs by @dependabot in https://github.com/FormidableLabs/victory/pull/2188

• Bump cross-fetch from 3.1.4 to 3.1.5 by @dependabot in https://github.com/FormidableLabs/victory/pull/2206

• add style interface to SliceProps type by @heythisispaul in https://github.com/FormidableLabs/victory/pull/2212

• Add jest and react testing library tests for victory-line and victory-area by @becca-bailey in https://github.com/FormidableLabs/victory/pull/2196

• fix typos in scale prop documentation by @heythisispaul in https://github.com/FormidableLabs/victory/pull/2218

• Bump cross-fetch from 3.1.4 to 3.1.5 by @dependabot in https://github.com/FormidableLabs/victory/pull/2213

• Bump cross-fetch from 3.1.4 to 3.1.5 in /demo/rn by @dependabot in https://github.com/FormidableLabs/victory/pull/2207

• add box plot jest/rtl tests by @heythisispaul in https://github.com/FormidableLabs/victory/pull/2225

• jest and rtl unit tests for bar components by @heythisispaul in https://github.com/FormidableLabs/victory/pull/2216

• Add victory-vendor package for d3 dependencies by @becca-bailey in https://github.com/FormidableLabs/victory/pull/2204

• Vendor in d3 libraries to new package victory-vendor and upgrade. Our CommonJS path now uses transpiled versions of the d3-* libraries while our ESM path continues to use the real underlying dependencies.

  • Update our tests to only refer to built versions of our libraries (in the past there was a mix of source and built). This means Karma uses the ESM version of libraries while Jest uses the CommonJS versions.
  • Added very basic Node.js tests to catch future ESM issues.
  • Switch all relative/prefixed import paths to be just import <name> from "victory-<pkg>".
  • Update various dependencies.