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

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
• VictoryLine
• VictoryScatter

API Documentation

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

Development

# Run the demo app server
$ npm start

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

# Run tests
$ npm test

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

Contributing

Please see CONTRIBUTING in the project builder archetype.

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!

Changelog

36.0.0 (2021-09-07)

• #1940 - Refactor VictoryChart, VictoryGroup and VictoryStack to take advantage of React.memo.