Add Charts into Our React App with Victory — Custom Chart

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.

Custom Chart

We can create a custom chart by adding multiple components together.

For instance, we can write:

import React from "react";
import { VictoryAxis, VictoryLabel, VictoryLine } from "victory";

const getDataSetOne = () => {
  return [
    { x: new Date(2000, 1, 1), y: 12 },
    { x: new Date(2001, 6, 1), y: 10 },
    { x: new Date(2002, 12, 1), y: 11 },
    { x: new Date(2003, 1, 1), y: 5 },
    { x: new Date(2004, 1, 1), y: 4 }
  ];
};

const getDataSetTwo = () => {
  return [
    { x: new Date(2000, 1, 1), y: 5 },
    { x: new Date(2001, 1, 1), y: 6 },
    { x: new Date(2002, 1, 1), y: 4 },
    { x: new Date(2003, 1, 1), y: 10 },
    { x: new Date(2004, 1, 1), y: 12 }
  ];
};

const getTickValues = () => {
  return [
    new Date(2000, 1, 1),
    new Date(2001, 1, 1),
    new Date(2002, 1, 1),
    new Date(2003, 1, 1),
    new Date(2004, 1, 1)
  ];
};

const dataSetOne = getDataSetOne();
const dataSetTwo = getDataSetTwo();
const tickValues = getTickValues();

export default function App() {
  return (
    <svg viewBox="0 0 450 350">
      <VictoryLabel
        x={25}
        y={55}
        text={"Economy n % change on a year earlier"}
      />
      <VictoryLabel x={200} y={55} text={"Dinosaur exportsn $bn"} />

<g transform={"translate(0, 40)"}>
        <VictoryAxis
          scale="time"
          standalone={false}
          tickValues={tickValues}
          tickFormat={(x) => x.getFullYear()}
        />
        <VictoryAxis
          dependentAxis
          domain={[-10, 15]}
          offsetX={50}
          orientation="left"
          standalone={false}
        />
        <VictoryLine
          data={[
            { x: new Date(2000, 1, 1), y: 0 },
            { x: new Date(2004, 6, 1), y: 0 }
          ]}
          domain={{
            x: [new Date(2000, 1, 1), new Date(2004, 1, 1)],
            y: [-10, 15]
          }}
          scale={{ x: "time", y: "linear" }}
          standalone={false}
        />
        <VictoryLine
          data={dataSetOne}
          domain={{
            x: [new Date(2000, 1, 1), new Date(2004, 1, 1)],
            y: [-10, 15]
          }}
          interpolation="monotoneX"
          scale={{ x: "time", y: "linear" }}
          standalone={false}
        />
        <VictoryAxis
          dependentAxis
          domain={[0, 50]}
          orientation="right"
          standalone={false}
        />
        <VictoryLine
          data={dataSetTwo}
          domain={{
            x: [new Date(2000, 1, 1), new Date(2004, 1, 1)],
            y: [0, 50]
          }}
          interpolation="monotoneX"
          scale={{ x: "time", y: "linear" }}
          standalone={false}
        />
      </g>
    </svg>
  );
}

We get our data for the lines with the functions.

Then we add the labels with the VictoryLabel components.

We set the x and y props to set their positions.

Then we put our chart components in the g element.

VictoryAxis renders the x-axis.

We set the scale to 'time' to render the dates on the axis.

Also, we set the offsetX to shift the axis.

The first VictoryLine has renders a horizontal line.

We set the data prop to set the data.

Also, we set the x and y domain to set the range of values to show on the axis.

scale is set individually for x and y since they have different scales.

And we set standalone to false so we can add more to the chart.

Then add another VictoryLine to render the data from dataSetOne .

We add another VictoryAxis to put a y-axis on the right side. And we set their own domain.

Then add another VictoryLine to render the data from dataSetTwo.

Now we get a line chart with 3 lines, one y-axis each on each side, an x-axis at the bottom, and labels at the top of the chart.

Conclusion

We can add custom charts with the components that comes with Victory in our React app.