Beautiful Charts and Graphs with React and Victory

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!

Getting Started

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

The Most Basic Example

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 :)

Providing Data to Charts and Graphs

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.

Bar and Line Graphs

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

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 },
  ]}
/>

But Wait… There’s More!

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 }
  ]}
/>

Conclusion

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!