Add Charts into Our React App with Victory

The Victory lets us add charts and data visualization into our React app.

In this article, we’ll look at how to add charts into our React app with Victory.

Installation

We can install Victory by running:

npm install victory

Getting Started

We can create a bar chart with the VictoryBar component.

To do this, we write:

import React from "react";
import { VictoryBar, VictoryChart } from "victory";

const data = [
  { quarter: 1, earnings: 13000 },
  { quarter: 2, earnings: 16500 },
  { quarter: 3, earnings: 14250 },
  { quarter: 4, earnings: 19000 }
];

export default function App() {
  return (
    <VictoryChart domainPadding={20}>
      <VictoryBar data={data} x="quarter" y="earnings" />
    </VictoryChart>
  );
}

to add a bar chart.

We have an array of objects as our chart data.

And we pass that as the value of the data prop.

Then we set the property names for the x and y-axis values with the x and y props respectively.

We set the domainPadding to shift the bars so that they don’t overlap with the axes.

We can customize the axis with the VictoryAxis component:

import React from "react";
import { VictoryBar, VictoryChart, VictoryAxis } from "victory";

const data = [
  { quarter: 1, earnings: 13000 },
  { quarter: 2, earnings: 16500 },
  { quarter: 3, earnings: 14250 },
  { quarter: 4, earnings: 19000 }
];

export default function App() {
  return (
    <VictoryChart domainPadding={20}>
      <VictoryAxis
        tickValues={[1, 2, 3, 4]}
        tickFormat={["Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"]}
      />
      <VictoryAxis dependentAxis tickFormat={(x) => `$${x / 1000}k`} />
      <VictoryBar data={data} x="quarter" y="earnings" />
    </VictoryChart>
  );
}

The dependentAxis prop lets us modify the y-axis.

tickFormat has a function that returns the content we want to display on the axis ticks.

We can also pass in an array of values to display on the axis.

Stacked Bar Charts

We can add a stacked bar chart with the VictoryStack component.

To do this, we write:

import React from "react";
import {
  VictoryBar,
  VictoryChart,
  VictoryAxis,
  VictoryStack,
  VictoryTheme
} from "victory";

const data2018 = [
  { quarter: 1, earnings: 13000 },
  { quarter: 2, earnings: 16500 },
  { quarter: 3, earnings: 14250 },
  { quarter: 4, earnings: 19000 }
];

const data2019 = [
  { quarter: 1, earnings: 15000 },
  { quarter: 2, earnings: 12500 },
  { quarter: 3, earnings: 19500 },
  { quarter: 4, earnings: 13000 }
];

const data2020 = [
  { quarter: 1, earnings: 11500 },
  { quarter: 2, earnings: 13250 },
  { quarter: 3, earnings: 20000 },
  { quarter: 4, earnings: 15500 }
];

const data2021 = [
  { quarter: 1, earnings: 18000 },
  { quarter: 2, earnings: 13250 },
  { quarter: 3, earnings: 15000 },
  { quarter: 4, earnings: 12000 }
];

export default function App() {
  return (
    <VictoryChart domainPadding={20} theme={VictoryTheme.material}>
      <VictoryAxis
        tickValues={[1, 2, 3, 4]}
        tickFormat={["Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"]}
      />
      <VictoryAxis dependentAxis tickFormat={(x) => `$${x / 1000}k`} />
      <VictoryStack>
        <VictoryBar data={data2018} x="quarter" y="earnings" />
        <VictoryBar data={data2019} x="quarter" y="earnings" />
        <VictoryBar data={data2020} x="quarter" y="earnings" />
        <VictoryBar data={data2021} x="quarter" y="earnings" />
      </VictoryStack>
    </VictoryChart>
  );
}

We just nest the VictoryBar in the VictoryStack component.

Conclusion

We can add bar charts easily into our React app with the Victory library.