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.
