Visualizing Data in React: An Intro to Victory

If you’re looking to visualize data in React, there are a whole bunch of popular libraries to help you. I happen to be partial to Victory, which has a large community, plenty of support, and clear, detailed documentation.

Getting started with Victory is fairly simple. Once you’ve created your React app, just run npm install victory and add import * as V from ‘victory’; to the top of your index.js file (or wherever you happen to be using it). That’ll import the whole Victory library, but you can adjust the imports as needed to reflect the parts of the library you’re using.

Next, you’ll probably want to take a look at the different chart types victory has available. The full list is in the docs, but there are tons of options, from plain old bar charts and pie charts to histograms and Voronoi diagrams.

We’ll use a bar chart as the example here, but the process is similar for all the chart types. Our dataset will be a few of SciShow’s recent videos, along with their number of views (full disclosure: I write and edit for them on occasion).

For a bar chart, each data point should have two values: one for the x axis, and one for the y axis. In our case, the x axis value assigns the data point to a new bar — representing an individual video — and the y axis value determines how tall that bar should be along the y axis, showing how many views it has.

You’ll want to organize your data set as an array. Each data point should be a JavaScript object with two keys: one for the x axis and one for the y axis.

Our data looks like this:

[
  {
    video: "Blue Is Pretty Special: \nHow Nature Gets the Blues",
    views: 235678
  },
  {
    video: "The Insect Nothing Messes With: \nMeet the Velvet Ant", 
    views: 502738
  },
  {
    video: "Bacteria Could Someday \nPower Our Cell Phones", 
    views: 140846
  },
  {
    video: "5 Ways Orcas Have Earned \nthe Nickname 'Killer Whale'", 
    views: 192457
  },
]

The \n newline characters create line breaks in the video titles so the labels don’t overlap on the x-axis. There are a few different ways to account for this using Victory, but creating multiple lines this way is the simplest approach for our purposes.

For easy readability, I’d recommend storing your dataset in a variable. We’ll call ours videoData.

And that’s all you need to set up your bar chart! To render it, the JSX code in your return statement should look something like this:

<VictoryBar data={videoData} x=“video” y=“views” />

Seriously, that’s it. The x and y props just tell Victory which keys correspond to the x and y values in the chart. You’re done!

Baby’s first Victory chart!

OK, fine. This could use a little more information— say, some details on the axes to tell you what you’re actually looking at.

You can customize what the axes look like by giving Victory formatting instructions using the <VictoryAxis /> component.

Before you get customizing, you’ll need to import the <VictoryChart /> component to use as a container for your <VictoryAxis /> and <VictoryBar /> components. The imports should look something like this:

import { VictoryChart, VictoryAxis, VictoryBar } from 'victory';

The basic component organization is fairly simple:

<VictoryChart>
  <VictoryAxis />
  <VictoryAxis 
    // this tells Victory this component is for the y axis
    dependentAxis 
  />
  <VictoryBar data={videoData} x="video" y="views" />
</VictoryChart>

Next, you can add the tickFormat prop to the component for the y axis, which will tell Victory how you want to format the values:

<VictoryChart>
  <VictoryAxis />
  <VictoryAxis
    dependentAxis
    tickFormat = { x => (`${x / 1000}k views`) }
  />
  
  <VictoryBar data={videoData} x=”video” y=”views” />
</VictoryChart>

This … still doesn’t look too great. Perhaps you’ve noticed.

Which brings us to Victory’s real power: customization.

When it comes to styling, for example, Victory has built-in themes you can use, or you can override those settings and make it almost completely your own. To use themes, just add VictoryTheme to your imports. We’ll use the standard VictoryTheme.material.

The domainPadding prop is another useful little tool — it moves the leftmost bar over a bit so it doesn’t overlap with the y-axis.

Our main problem here is the formatting for the tick labels: the font is way too big, which is leading to overlap, words getting cut off, and just general ugliness. Fortunately, we can use the style prop to fix that:

<VictoryChart domainPadding={20} theme={VictoryTheme.material}>
  <VictoryAxis
    style={{ tickLabels: { fontSize: 5 } }}
  />
  <VictoryAxis
    dependentAxis
    style={{ tickLabels: { fontSize: 5 } }}
    tickFormat={y => (`${y / 1000}k views`)}
  />
  <VictoryBar data={videoData} x="video" y="views" />
</VictoryChart>

And here’s the result:

Much better!

If you’re looking to go beyond basic styling, there’s also all kinds of user-friendly functionality you can add, like the ability to pan and zoom. More about all that is in the docs.

For now, hopefully this gives you some insight into getting started with Victory. Happy charting!