Having a ton of data is a great thing. You can use it to identify usage patterns and trends or apply it towards predictive failure analysis for your fleet of servers. Sadly, a lot of the time data is meticulously collected and presented in a stale old <table>
. Fortunately, with Victory (by Formidable) you can take your data and quickly easily turn your data into beautiful charts and graphs.
Victory is a collection of composable React components for building interactive data visualizations. It is documented as being opinionated, but with a robust API it’s easy to completely customize. You can even use it with your React Native project by way of victory-native!
To get started, we need to add Victory to our project by way of npm
or yarn
:
# via npm
$ npm install --save victory
# via yarn
$ yarn add victory
Now that we have Victory added to our project, we can import it and get to work.
Out of the box, Victory components have sane default properties that allow them to be easily used as placeholders in your project. Think of it like having Lorem Ipsum for charts and graphs.
Victory has a wide variety of charts and graphs but for the sake of this article we’re only going to use bar graphs, line graphs and pie charts.
All of the Victory chart types are prefixed with the word Victory
and can be imported individually from the import or you can import them all at once:
// Generic import
import victory from "victory";
// Individual component imports
import {
VictoryBar,
VictoryChart,
VictoryLine,
VictoryPie,
} from "victory";
As mentioned, without specifying any properties, the components will still display graphs and charts with a small bit of dummy data. Hence this example being the most basic of examples ;)
import React from "react";
import { render } from "react-dom";
import {
VictoryBar,
VictoryChart,
VictoryLine,
VictoryPie,
} from "victory";
import "./styles.css";
function App() {
return (
<div className="App">
<h1>The Most Basic Example</h1>
<VictoryChart>
<VictoryBar />
</VictoryChart>
<VictoryChart>
<VictoryLine />
</VictoryChart>
<VictoryPie />
</div>
);
}
const container = document.createElement("div");
document.body.appendChild(container);
render(<App />, container);
You may have noticed that the bar and line graphs are nested inside of a VictoryChart
component. That’s because those particular components only provide the graphed data and not the graph’s axes.
You may have also noticed that the bar graph is overlapping the axis, we’ll get to that one in a bit :)
The previous example is all well and good but it is only beneficial if you need some random charts as placeholders. If you want to actually feed the charts and graphs with your own data, you will need to pass a data
property with properly formatted data based on the chart or graph you’re using.
In their most basic form, bar and line graphs expect an array of objects that contain both an x
and y
property:
<VictoryChart>
<VictoryBar
data={[
{ x: "lizard", y: 1234 },
{ x: "snake", y: 2048 },
{ x: "crocodile", y: 2600 },
{ x: "alligator", y: 9000 },
]}
/>
</VictoryChart>
If you’re working with a system that spits data out a certain way and you don’t want to have to massage it, you can format your data with different properties, you just need to pass in the additional properties x
and y
so Victory knows what’s up:
<VictoryChart>
<VictoryBar
data={[
{ reptile: 'lizard', awesomeness: 1234 },
{ reptile: 'snake', awesomeness: 2048 },
{ reptile: 'crocodile', awesomeness: 2600 },
{ reptile: 'alligator', awesomeness: 9000 },
]}
x="reptile"
y="awesomeness"
/>
</VictoryChart>
Pie charts by nature don’t have axes that need labels, so you can get away without the additional properties, but you still need to specific which value is the x
and which is the y
:
<VictoryPie
data={[
{ x: "lizard", y: 1234 },
{ x: "snake", y: 2048 },
{ x: "crocodile", y: 2600 },
{ x: "alligator", y: 9000 },
]}
/>
I mentioned that we could make beautiful charts and graphs with Victory, but to be honest, everything is just a shade of grey and not all that eye catching. As I also mentioned, Victory exposes a fantastic API that makes it very easy to customize (and fix that pesky overlap on the bar chart):
<VictoryChart domainPadding={40}>
<VictoryBar
style={{ data: { fill: "#6DB65B" } }}
data={[
{ x: "lizard", y: 1234 },
{ x: "snake", y: 2048 },
{ x: "crocodile", y: 2600 },
{ x: "alligator", y: 9000 }
]}
/>
</VictoryChart>
And you can get really crazy with pie charts:
<VictoryPie
colorScale={["#008f68", "#6DB65B", "#4AAE9B", "#EFBB35"]}
data={[
{ x: "lizard", y: 1234 },
{ x: "snake", y: 2048 },
{ x: "crocodile", y: 2600 },
{ x: "alligator", y: 9000 }
]}
/>
Victory is an easy to use and easy to customize library for creating data visualizations. Outside of the SVG related styling, the properties are easy to understand and there’s no shortage of chart and graph types available.
With additional features like sane enough defaults to leverage Victory as a graph and chart placeholder library as well as React Native capabilities, it’s a must have for all of your React graphing needs.
I hope you found this article informative and helpful and if you are looking for a live demo of the code in this post, you can find it out on CodeSandbox!
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.