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

victory-chart@^30.0.0 exports VictoryChart

To view documentation for VictoryChart please see https://formidable.com/open-source/victory/docs/victory-chart

To suggest an addition or correction to this documentation please see https://github.com/FormidableLabs/victory/blob/main/docs/src/content/docs/victory-chart.md

Changelog

35.8.0 (2021-05-19)

• #1858 - domainPadding updates

updates how domainPadding is applied to charts when 1) the additional padding would not result new quadradants being added, or 2) the user has set singleQuadrantDomainPadding={false}. In these cases, domainPadding is applied by calculating a new, smaller range that takes the desired, pixel-based padding into account, and then adding domain padding such that the previous domain fits entirely within the new, smaller range. In most cases, this change will make it much easier to do things like create bar charts where the first bar starts cleanly at the edge of the chart, by setting domainPadding={{ x: myBarWidth / 2 }} This may cause visual changes for charts that use very large values for domainPadding. The domainPadding prop may need to be adjusted

calculates a more exact defaultDomainPadding for grouped bar charts based on the offset, number of bars, and the width of each bar (either from the barWidth prop or from a default barWidth based on the number of bars and the range). Previously, defaultDomainPadding was approximated based only on offset and number of bars.