Add Charts into Our React App with Victory — Histograms and Scatterplots

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.

Histogram

We can add a histogram into our React app with Victory’s VictoryHistogram component.

For instance, we can write:

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

const data = [
  { x: 0 },
  { x: 1 },
  { x: 1 },
  { x: 1 },
  { x: 1 },
  { x: 2 },
  { x: 2 },
  { x: 3 },
  { x: 4 },
  { x: 7 },
  { x: 7 },
  { x: 10 }
];

export default function App() {
  return (
    <VictoryChart>
      <VictoryHistogram
        style={{ data: { fill: "#F1737F" } }}
        cornerRadius={3}
        data={data}
      />
    </VictoryChart>
  );
}

to add the VictoryHistogram component to add the histogram.

The cornerRadius lets us set the corner radius.

And we set the bar’s fill color with the data.fill property.

We can change the bins with the bins prop:

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

const data = [
  { x: 0 },
  { x: 1 },
  { x: 1 },
  { x: 1 },
  { x: 1 },
  { x: 2 },
  { x: 2 },
  { x: 3 },
  { x: 4 },
  { x: 7 },
  { x: 7 },
  { x: 10 }
];

export default function App() {
  return (
    <VictoryChart>
      <VictoryHistogram
        style={{ data: { fill: "#F1737F" } }}
        cornerRadius={3}
        bins={[0, 2, 8, 15]}
        data={data}
      />
    </VictoryChart>
  );
}

And we can stack histograms with the VictoryStack component:

import React from "react";
import { VictoryChart, VictoryHistogram, VictoryStack } from "victory";

const data1 = [
  { x: 0 },
  { x: 1 },
  { x: 1 },
  { x: 1 },
  { x: 1 },
  { x: 2 },
  { x: 2 },
  { x: 3 },
  { x: 4 },
  { x: 7 },
  { x: 7 },
  { x: 10 }
];

const data2 = [
  { x: 0 },
  { x: 1 },
  { x: 1 },
  { x: 1 },
  { x: 2 },
  { x: 2 },
  { x: 3 },
  { x: 4 },
  { x: 5 },
  { x: 7 },
  { x: 8 }
];

export default function App() {
  return (
    <VictoryChart>
      <VictoryStack colorScale="qualitative">
        <VictoryHistogram data={data1} />
        <VictoryHistogram cornerRadius={3} data={data2} />
      </VictoryStack>
    </VictoryChart>
  );
}

We just put the VictoryHistogram s in the VictoryStack component.

Scatterplots

We can create scatterplots with the VictoryScatter component.

For instance, we can write:

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

const data = [
  { x: 1, y: 2 },
  { x: 2, y: 3 },
  { x: 3, y: 5 },
  { x: 4, y: 4 },
  { x: 5, y: 7 }
];

export default function App() {
  return (
    <VictoryChart
      style={{
        background: { fill: "lavender" }
      }}
    >
      <VictoryScatter data={data} />
    </VictoryChart>
  );
}

We can set the background of the scatterplot with the background.fill property.

And we add the scatterplot with the VictoryScatter property.

Conclusion

We can add a histogram and scatterplot into our React app with Victory.