Add Charts into Our React App with Victory — Bar Labels, Pie, and Polar Charts

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.

Multiple Bar Labels

We can add multiple bar labels with an array of text.

For instance, we can write:

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

const data = [
  { x: 1, y: 3, label: ["first", "label"] },
  { x: 2, y: 4, label: ["second", "label"] },
  { x: 3, y: 2, label: ["third", "final", "label"] }
];

export default function App() {
  return (
    <VictoryChart domainPadding={{ x: 40, y: 40 }}>
      <VictoryBar
        style={{ data: { fill: "#c43a31" } }}
        data={data}
        labels={({ datum }) => `y: ${datum.y}`}
        labelComponent={
          <VictoryLabel
            backgroundStyle={[{ fill: "orange" }, { fill: "gold" }]}
            backgroundPadding={{ left: 5, right: 5 }}
          />
        }
        dataComponent={
          <Bar tabIndex={0} ariaLabel={({ datum }) => `x: ${datum.x}`} />
        }
      />
    </VictoryChart>
  );
}

We have the label property in the data array.

And we add an array of styles into the backgroundStyle prop.

Polar Chart with Labels

We can add a polar chart with labels with the VictoryBar ‘s polar prop.

For instance, we can write:

import React from "react";
import { VictoryBar, VictoryLabel, VictoryTooltip } from "victory";

const data = [
  { x: 1, y: 3, label: ["first", "label"] },
  { x: 2, y: 4, label: ["second", "label"] },
  { x: 3, y: 2, label: ["third", "final", "label"] }
];

export default function App() {
  return (
    <VictoryBar
      polar
      data={data}
      style={{ data: { width: 40, fill: "tomato" } }}
      labelComponent={
        <VictoryTooltip
          active
          labelPlacement="perpendicular"
          pointerLength={30}
          pointerWidth={0}
          flyoutPadding={0}
          labelComponent={
            <VictoryLabel
              verticalAnchor="end"
              dy={8}
              backgroundStyle={{ fill: "white" }}
              backgroundPadding={8}
            />
          }
        />
      }
    />
  );
}

Our 1abelComponent prop has the VictoryTooltip component.

We set the labelPlacement to perpendicular to place the label to be flush with the polar segments.

We also set the pointerLength , pointerWidth to set the length and width of the label.

VictoryLabel has the label text.

Pie Chart with Labels

We can add pie charts with labels with the VictoryPie and VictoryTooltip components.

For instance, we can write:

import React from "react";
import { VictoryPie, VictoryTooltip } from "victory";

const data = [
  { x: 1, y: 3, placement: "vertical" },
  { x: 2, y: 4, placement: "parallel" },
  { x: 3, y: 2, placement: "perpendicular" }
];

export default function App() {
  return (
    <VictoryPie
      colorScale="warm"
      radius={120}
      style={{ labels: { padding: 5, fontSize: 15 } }}
      data={data}
      labels={({ datum }) => `${datum.placement}nlabel`}
      labelPlacement={({ datum }) => datum.placement}
      labelPosition="startAngle"
      labelComponent={<VictoryTooltip active />}
    />
  );
}

We set the label placement with the labelPlacement prop.

It gets the placement property value and returns it.

We render the label with th labelComponent .

And we place the labels flush to the pie segments with the labelPosition prop.

Conclusion

We can add multiple bar labels and other custom label options in our React app with Victory.