victory-chart
Advanced tools
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.
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;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 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 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.
VictoryChart is an intelligent, flexible charting component for React. VictoryChart makes it easy to plot several datasets on the same chart, plot pure math functions, and overlay several types of charts. It relies on d3 for some of the math, but leaves all of the rendering to React. This component is built from several other components on the Victory ecosystem, including VictoryAxis, VictoryLine, VictoryScatter, and VictoryBar. More chart types coming soon!
There are several configuration options for VictoryChart, but if only the data is prop is provided, a sensible chart will still be rendered.
All props are optional, but you wont get very far without passing in some data.
This prop specifies how data should be plotted. Currently supported types are
"line", "scatter", "bar", and "stackedBar". This "global" chart type can be overridden by passing a different type in with the dataAttributes or yAttributes props
The data prop specifies the data to be plotted. Data should be in the form of an array of data points, or an array of arrays of data points for multiple datasets. Each data point should be an object with x and y properties. Other properties may be added to the data point object, such as label, color, size, symbol or opacity. These properties will be interpreted and applied to the individual data point in chart types that support them.
examples:
data={[
{x: new Date(1982, 1, 1), y: 125, color: "red", symbol: "plus"},
{x: new Date(1987, 1, 1), y: 257, color: "blue", symbol: "star"},
{x: new Date(1993, 1, 1), y: 345, color: "green", symbol: "circle"},
]}
data={[
[{x: 5, y: 3}, {x: 4, y: 2}, {x: 3, y: 1}],
[{x: 1, y: 2}, {x: 2, y: 3}, {x: 3, y: 4}],
[{x: 1, y: 2}, {x: 2, y: 2}, {x: 3, y: 2}]
]}
The dataAttributes prop describes how a data set should be plotted and styled. This prop can be given as an object, or an array of objects. If this prop is given as an array of objects, the properties of each object in the array will be applied to the data points in the corresponding array of the data prop.
examples:
dataAttributes={{type: "scatter", symbol: "square", color: "blue"}}
dataAttributes={[
{type: "line", stroke: "green", width: 3},
{type: "bar", color: "orange"}
]}
The x prop provides another way to supply data for chart to plot. This prop can be given as an array of values or an array of arrays, and it will be plotted against whatever y prop is provided. If no props are provided for y, the values in x will be plotted as the identity function (x) => x.
examples:
x={["apples", "oranges", "bananas"]}
x={[
[1, 2, 3],
[2, 3, 4],
[4, 5, 6]
]}
The y prop provides another way to supply data for chart to plot. This prop can be given as a function of x, or an array of values, or an array of functions and / or values. If x props are given, they will be used in plotting (x, y) data points. If x props are not provided, a set of x values evenly spaced across the x domain will be calculated, and used for plotting data points.
examples:
y={(x) => x + 5}
y={[1, 2, 3]}
y={[
(x) => x,
[2, 3, 4],
(x) => Math.sin(x)
]}
The yAttributes prop describes how a data set should be plotted and styled. This prop behaves identically to the dataAttributes prop, but is applied to any data provided via the y prop
examples:
yAttributes={{type: "scatter", symbol: "square", color: "blue"}}
yAttributes={[
{type: "line", stroke: "green", width: 3},
{type: "bar", color: "orange"}
]}
The samples prop specifies how many individual points to plot when plotting y as a function of x. Samples is ignored if x props are provided instead.
The interpolation prop determines how data points should be connected when plotting a line. Supported options are: "linear", "linear-closed", "step", "step-before", "step-after", "basis", "basis-open", "basis-closed", "bundle", "cardinal", "cardinal-open", "cardinal-closed", and "monotone"
The scale prop determines which scales your chart should use. This prop can be
given as a function, or as an object that specifies separate functions for x and y. Supported scales are d3 linear scales, time scales, power scales, and log scales. d3 ordinal scales are not supported, but non-numeric data is automatically handled and range band like behavior is supported via the categories prop.
examples:
scale={() => d3.time.scale()}
scale={{x: () => d3.scale.linear(), y: () => d3.scale.log()}}
The domain prop describes the range of values your chart will include. This prop can be given as a array of the minimum and maximum expected values for your chart, or as an object that specifies separate arrays for x and y. If this prop is not provided, a domain will be calculated from data, or other available information.
examples:
domain={[-1, 1]}
domain={{x: [0, 100], y: [0, 1]}}
The range prop describes the range of pixels your chart will cover. This prop can begiven as a array of the minimum and maximum expected values for your chart, or as an object that specifies separate arrays for x and y. If this prop is not provided, a range will be calculated based on the height, width, and margin provided in the style prop, or in default styles. It is usually a good idea to let the chart component calculate its own range.
examples:
range={[0, 500]}
range={{x: [0, 500], y: [500, 300]}}
The containerElement prop specifies which element the compnent will render. For standalone charts, the containerElement prop should be "svg". If you need to compose a chart with some other svg element, the containerElement prop should be "g", and will need to be rendered within an svg tag.
The style prop specifies styles for your chart. Victory Chart relies on Radium, so valid Radium style objects should work for this prop, however height, width, and margin are used to calculate range, and need to be expressed as a number of pixels
example:
style={{fontSize: 15, fontFamily: "helvetica", width: 500, height: 300}}
The axisLabels prop specifies the labels for your axes. It should be given as an object with x and y properties.
example: {x: "years", y: "cats"}
The axisOrientation prop specifies the layout of your axes. It should be given asan object with x and y properties. Currently, Victory Chart only suppotys vertical y axes and horizontal x axes
example: {x: "bottom", y: "right"}
The showGridLines prop specifies whether or not to draw grid lines for a particular axis. It should be given as an object with x and y properties. Note: grid lines for a particular axis extend perpendicularly from that axis.
example: {x: false, y: true}
The tickValues prop explicity specifies which ticks values to draw on each axis. This prop should be given as an object with arrays specified for x and y
example: {x: ["apples", "bananas", "oranges"] y: [2, 4, 6, 8]}
The tickFormat prop specifies how tick values should be expressed visually. This prop should be given as an object with functions specified for x and y
example: {x: () => d3.time.format("%Y"), y: (x) => x.toPrecision(2)}
The tickCount prop specifies how many ticks should be drawn on each axis if ticksValues are not explicitly provided. This prop shouls be given as an object with numbers specified for x and y
@example {x: 7, y: 5}
The axisStyle prop specifies styles scoped only to the axis lines. Victory Chart relies on Radium, so valid Radium style objects should work for this prop.
example: {strokeWidth: 2, stroke: "black"}
The tickStyle prop specifies styles scoped only to the axis ticks. Victory Chart relies on Radium, so valid Radium style objects should work for this prop.
example: `{fontSize: 15, fontFamily: "helvetica"}``
The gridStyle prop specifies styles scoped only to the grid lines. Victory Chart relies on Radium, so valid Radium style objects should work for this prop.
example: {strokeWidth: 1, stroke: "#c9c5bb"}
The barWidth prop specifies the width in number of pixels for bars rendered in a bar chart.
The barPadding prop specifies the padding in number of pixels between bars rendered in a bar chart.
The domainPadding prop specifies a number of pixels of padding to add to the beginning and end of a domain. This prop is useful for explicitly spacing ticks farther from the origin to prevent crowding. This prop should be given as an object with numbers specified for x and y.
example: {x: 20, y: 0}
The categories prop specifies the categories for a bar chart. This prop should be given as an array of string values, numeric values, or arrays. When this prop is given as an array of arrays, the minimum and maximum values of the arrays define range bands, allowing numeric data to be grouped into segments.
examples:
categories={["dogs", "cats", "mice"]}
categories={[
[0, 5],
[5, 10],
[10, 15]
]}
The animate prop determines whether the chart should animate with changing data. This prop can be given as a boolean, or an object with boolean values specified for each supported chart type.
example: {line: true, scatter: true, axis: false, bar: true}
Please see DEVELOPMENT
Please see CONTRIBUTING
31.2.0 (2019-01-27)
Axis improvements
axisValue prop for both cartesian and polar charts. This prop allows users to position an axis relative to a value on the opposite axis. Values may be given as numbers, dates, or strings. This prop only works for axis components when they are nested within VictoryChart. Standalone axes can still be positioned using offsetX and offsetY` props.Removes all deprecated lifecycle methods
componentWillReceiveProps lifecycle methods and adds shouldComponentUpdate logic for higher level components. Previously only the lowest level components performed sCU checks.componentWillMount with componentDidMountbug fixes
FAQs
Chart Component for Victory
The npm package victory-chart receives a total of 266,159 weekly downloads. As such, victory-chart popularity was classified as popular.
We found that victory-chart demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 21 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."