victory-chart

What is victory-chart?

Victory-chart is a composable charting library for React. It provides a set of modular charting components that can be combined to create complex data visualizations. The library is built on top of D3.js and offers a variety of chart types, including bar charts, line charts, pie charts, and more.

What are victory-chart's main functionalities?

Line Chart

This code demonstrates how to create a simple line chart using Victory-chart. The VictoryLine component is used to render the line chart within a VictoryChart container.

import React from 'react';
import { VictoryChart, VictoryLine } from 'victory';

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

const LineChart = () => (
  <VictoryChart>
    <VictoryLine data={data} />
  </VictoryChart>
);

export default LineChart;

Bar Chart

This code demonstrates how to create a bar chart using Victory-chart. The VictoryBar component is used to render the bar chart within a VictoryChart container.

import React from 'react';
import { VictoryChart, VictoryBar } from 'victory';

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

const BarChart = () => (
  <VictoryChart>
    <VictoryBar data={data} />
  </VictoryChart>
);

export default BarChart;

Pie Chart

This code demonstrates how to create a pie chart using Victory-chart. The VictoryPie component is used to render the pie chart.

import React from 'react';
import { VictoryPie } from 'victory';

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

const PieChart = () => (
  <VictoryPie data={data} />
);

export default PieChart;

Other packages similar to victory-chart

recharts

Recharts is a composable charting library built on React components. It is similar to Victory-chart in that it provides a variety of chart types and is easy to use with React. However, Recharts has a different API and offers some unique features like animations and tooltips out of the box.

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. Compared to Victory-chart, Nivo provides more advanced features and customization options, but it may have a steeper learning curve.

react-chartjs-2

React-chartjs-2 is a React wrapper for Chart.js, a popular JavaScript charting library. It provides a simple way to integrate Chart.js charts into React applications. While it offers a wide range of chart types and customization options, it relies on Chart.js for rendering, which may not be as flexible as Victory-chart's approach.

README

[![Travis Status][trav_img]][trav_site]

VictoryChart

A flexible charting component for React. VictoryChart composes other victory components into reusable charts. Acting as a coordinator rather than a stand-alone component, VictoryChart reconciles props such as domain and scale for child components, and provides a set of sensible defaults.

VictoryChart includes:

• VictoryAxis
• VictoryArea
• VictoryBar
• VictoryCandlestick
• VictoryErrorBar
• VictoryLine
• VictoryScatter

API Documentation

Detailed documentation and interactive examples can be found at http://formidable.com/open-source/victory/docs/victory-chart

Requirements

Projects using Victory should also depend on [React][] and [prop-types][].

Issues

To make it easier to manage issues across all of Victory, we have disabled issues on this repo. Please open issues in the main victory repo instead. You can track our progress on issues here

Development

# Run the demo app server
$ npm start

# Open the demo app
$ open http://localhost:3000

# Run tests
$ npm test

Multi-repo development

Victory uses lank for multi-repo development. Use a lank workflow to test changes in victory dependencies. Here's an example of setting up lank to test changes in victory-core from victory-chart

First, make sure that all of your Victory repos are siblings in the same directory

# Install lank globally
$ npm install -g lank

Victory repos are already configured with appropriate .lankrc and lank scripts. To test changes in victory-core from victory-chart:

# Run all commands from the root of `victory-chart`
$ cd victory-chart

# Run `lank link` to remove `victory-core` from node_modules
$ lank link

# Watch for changes to lanked repos. Leave this process running in its own terminal window
$ npm run lank-watch

# Run a dev server with your lanked repos. In a new terminal window...
$ npm run lank-run

Refresh your browser to pick up changes.

For more on the development environment, see DEVELOPMENT in the project builder archetype.

Contributing

Please review our Code of Conduct before contributing.

For a detailed contribution guide, please see CONTRIBUTING in the project builder archetype.

Caveats git installs using npm 2 may fail in postinstall. If you are consuming Victory via git installs please use npm >=3.0.0

IMPORTANT

This project is in a pre-release state. We're hard at work fixing bugs and improving the API. Be prepared for breaking changes! [React]: https://facebook.github.io/react/ [prop-types]: https://github.com/reactjs/prop-types [trav_img]: https://api.travis-ci.org/FormidableLabs/victory-chart.svg [trav_site]: https://travis-ci.org/FormidableLabs/victory-chart