Data Visualization in React using Victory (Part 1)

Photo by Luke Chesser on Unsplash

React is one of the trendiest frameworks for building single-page UI-first applications. Its popularity is increasing for the second year in a row and there are reasons for that.

Getting started with React is easy both for beginners and experienced developers thankfully to the supportive community and detailed documentation — it covers pretty much every aspect of working with React — from basics to advanced concepts.

What is Victory ?

Victory is a ReactJs Library. It is a collection of composable and reusable components for building interactive data visualizations.

Why Use Victory ?

One of the main benefits of using Victory is its customizability. The components can be altered, wrapped or created from scratch, proving to be very beneficial to developers.

Compared to other popular data visualization libraries like Plotly and D3, Victory has a user-friendly and intuitive documentation. Even a person with minimal programming background can easily use it. As far as its UI is concerned, it will immediately catch your eye with its stylishness, interactiveness and smooth animations.

One of its drawbacks is being limited to only React, unlike Plotly which can be integrated with Python, React, MATLAB, Jupyter etc.

Getting Started

To get started, Victory needs to be added to your project.

#via npmnpm install victory#via yarnyarn add victory

Creating A Basic Graph

Now that you have added Victory, you can import it in your project.

Victory has a wide variety of charts and graphs. For this article, we are going to use bar graphs to provide an effective introduction.

import React from 'react';import './App.css';//importing victory componentsimport {VictoryBar, VictoryChart} from "victory";
function App() {return (
<div className="App">
<VictoryChart> <VictoryBar></VictoryBar> </VictoryChart> <VictoryPie></VictoryPie> </div>
);
}export default App;

With the above code, you will get the following bar chart on your page, after starting the npm server.

You will notice 2 things:

  • Even though no data was provided you still get a bar chart with values. This is because Victory uses some dummy placeholder values. Think of it as Loren Ipsum for charts and graphs.
  • You did not need to wrap the VictoryPie component inside VictoryChart. This is because it provides graphed data along with the graph axes but VictoryBar just provides the graphed data.

Providing Custom Data

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.

<VictoryChart>  <VictoryBar    data={[    {quarter: 1, earnings: 100},    {quarter: 2, earnings: 130},    {quarter: 3, earnings: 90},    {quarter: 4, earnings: 20}    ]}    x = "quarter"    y = "earnings"  ></VictoryBar></VictoryChart>

With the above code, you will get the following bar chart on your page.

In the above data, the x-axis is referred to as quarter and y-axis as earnings. You can skip this part and keep it x and y for simplicity.

Naming Axes

Let’s take advantage of the VictoryAxis component to display what each axis on the chart is referencing. One axis will display the label “Earnings” while another will display the label “Quarter”

<VictoryChart domainPadding={40}>  <VictoryAxis    tickValues={[1, 2, 3, 4]}    label = "Quarter"/>  <VictoryAxis    dependentAxis    tickFormat={(y) => (`$${y}k`)}    label="Amount"    style={{axisLabel: {padding: 40 } }}/>  <VictoryBar    data={[    {x: 1, y: 10},    {x: 2, y: 40},    {x: 3, y: 90},    {x: 4, y: 20}  ]}/></VictoryChart>

Using VictoryAxis you can label the axes, as needed. You can also provide tick values format and custom styling to each axis. Using the ‘domainPadding property’ of VictoryChart you can shift the bars that were earlier overlapping with the Y-axis.

With the above code, you will get the following bar chart on your page.

Conclusion

These were just the basics one needs to implement Bar graphs in Victory.
Victory provides many more such charts and graphs which can be used in your data visualization projects to make them look more interactive and eye catching.

Refer to Data Visualization in React using Victory (Part 2) For further Customizing and Styling your Bar Graph.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store