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.
Specifying x and y Data
We can specify the data for the x and y axes with the property name if we have an array of objects as data.
For instance, we can write:
import React from "react";
import { VictoryBar, VictoryChart } from "victory";
export default function App() {
return (
<VictoryChart domainPadding={50}>
<VictoryBar
data={[
{ employee: "Jane Doe", salary: 65000 },
{ employee: "John Doe", salary: 62000 }
]}
x="employee"
y="salary"
/>
</VictoryChart>
);
}
We set the x and y props to the property names with the data for the x and y axes respectively.
If we have an array of arrays, we can specify the index with the data we want to display for the x and y axes:
import React from "react";
import { VictoryBar, VictoryChart } from "victory";
export default function App() {
return (
<VictoryChart domainPadding={50}>
<VictoryBar
data={[
[1, 1],
[2, 3],
[3, 1]
]}
x={0}
y={1}
/>
</VictoryChart>
);
}
If we have an array od nested objects, we can also specify the path string or an array of strings to form the property path with the data we want to display:
import React from "react";
import { VictoryBar, VictoryChart } from "victory";
export default function App() {
return (
<VictoryChart domainPadding={50}>
<VictoryBar
data={[
{
employee: { firstName: "Jane", lastName: "Doe" },
salary: { base: 65000, bonus: 2000 }
},
{
employee: { firstName: "John", lastName: "Doe" },
salary: { base: 62000, bonus: 6000 }
}
]}
x="employee.firstName"
y={["salary", "base"]}
/>
</VictoryChart>
);
}
Processing Data
We can process data by passing in functions for the x and y props:
import React from "react";
import { VictoryAxis, VictoryBar, VictoryChart } from "victory";
export default function App() {
return (
<VictoryChart domainPadding={{ x: 40 }}>
<VictoryBar
data={[
{ experiment: "trial 1", expected: 3.95, actual: 3.21 },
{ experiment: "trial 2", expected: 3.95, actual: 3.38 },
{ experiment: "trial 3", expected: 3.95, actual: 2.05 },
{ experiment: "trial 4", expected: 3.95, actual: 3.71 }
]}
x="experiment"
y={(d) => (d.actual / d.expected) * 100}
/>
<VictoryAxis
label="experiment"
style={{
axisLabel: { padding: 30 }
}}
/>
<VictoryAxis
dependentAxis
label="percent yield"
style={{
axisLabel: { padding: 40 }
}}
/>
</VictoryChart>
);
}
We pass in a function to compute the value of y to display with a function.
d has the data entry we want to compute.
Sorting Data
We can sort our data with the sortKey prop:
import React from "react";
import { VictoryChart, VictoryLine } from "victory";
import { range } from "lodash";
export default function App() {
return (
<VictoryChart domainPadding={{ x: 40 }}>
<VictoryLine
data={range(0, 2 * Math.PI, 0.01).map((t) => ({ t }))}
sortKey="t"
x={({ t }) => Math.sin(3 * t + 2 * Math.PI)}
y={({ t }) => Math.sin(2 * t)}
/>
</VictoryChart>
);
}
Since sortKey is set to t , we sort by the t value.
Conclusion
We can process our data in various ways to create the chart we want with React Victory.
