Add Charts into Our React App with Victory — Bar Colors and Labels

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.

Change Bar Colors

We can change the colors of the bars with the VictoryStack component’s colorScale prop.

For instance, we can 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}>
      <VictoryAxis
        tickValues={[1, 2, 3, 4]}
        tickFormat={["Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"]}
      />
      <VictoryAxis dependentAxis tickFormat={(x) => `$${x / 1000}k`} />
      <VictoryStack colorScale="warm">
        <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>
  );
}

Add Bar Labels

For instance, we can write:

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

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

export default function App() {
  return (
    <VictoryChart domainPadding={{ x: 40, y: 40 }}>
      <VictoryBar
        style={{ data: { fill: "#c43a31" } }}
        data={data}
        labels={({ datum }) => `y: ${datum.y}`}
        labelComponent={<VictoryTooltip />}
        dataComponent={
          <Bar tabIndex={0} ariaLabel={({ datum }) => `x: ${datum.x}`} />
        }
      />
    </VictoryChart>
  );
}

We render the bar chart by setting the labels prop to get the data from the datum property.

We do the same with tyhe x-axis by setting the arialLabel prop.

And we set the labelComponent prop to add a tooltip for the bar when we hover over it to show its value.

Backgrounds for Labels

We can add styled bar labels by using the VictoryLabel component.

For instance, we can write:

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

const data = [
  { x: 1, y: 13000, label: "first label" },
  { x: 2, y: 16500, label: "second label" },
  { x: 3, y: 14250, label: "3rd label" },
  { x: 4, y: 19000, label: "4th 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
            dy={-20}
            backgroundStyle={{ fill: "tomato", opacity: 0.6 }}
            backgroundPadding={{ bottom: 5, top: 5, left: 10, right: 10 }}
          />
        }
        dataComponent={
          <Bar tabIndex={0} ariaLabel={({ datum }) => `x: ${datum.x}`} />
        }
      />
    </VictoryChart>
  );
}

to add the VictoryLabel component to set the backgroundStyle and backgroundPadding props with the styles we want.

The label property will be automatically displayed as the label text.

Conclusion

We can customize bar charts with labels and colors in our React app with Victory.