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.

#javascript #programming #technology