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 Nivo.
Bump Chart
We can add bar charts into our React app with Nivo.
First, we have to install the @nivo/bump package by running:
npm i @nivo/bump
For instance, we can write:
import React from "react";
import { ResponsiveBump } from "@nivo/bump";
const data = [
{
id: "1",
data: [
{
x: 2000,
y: 7
},
{
x: 2001,
y: 11
},
{
x: 2002,
y: 2
},
{
x: 2003,
y: 5
},
{
x: 2004,
y: 1
}
]
},
{
id: "2",
data: [
{
x: 2000,
y: 6
},
{
x: 2001,
y: 9
},
{
x: 2002,
y: 7
},
{
x: 2003,
y: 4
},
{
x: 2004,
y: 7
}
]
},
{
id: "3",
data: [
{
x: 2000,
y: 12
},
{
x: 2001,
y: 6
},
{
x: 2002,
y: 6
},
{
x: 2003,
y: 12
},
{
x: 2004,
y: 2
}
]
},
{
id: "4",
data: [
{
x: 2000,
y: 5
},
{
x: 2001,
y: 1
},
{
x: 2002,
y: 3
},
{
x: 2003,
y: 2
},
{
x: 2004,
y: 4
}
]
},
{
id: "5",
data: [
{
x: 2000,
y: 2
},
{
x: 2001,
y: 4
},
{
x: 2002,
y: 11
},
{
x: 2003,
y: 8
},
{
x: 2004,
y: 3
}
]
},
{
id: "6",
data: [
{
x: 2000,
y: 1
},
{
x: 2001,
y: 5
},
{
x: 2002,
y: 9
},
{
x: 2003,
y: 10
},
{
x: 2004,
y: 9
}
]
},
{
id: "7",
data: [
{
x: 2000,
y: 3
},
{
x: 2001,
y: 12
},
{
x: 2002,
y: 12
},
{
x: 2003,
y: 7
},
{
x: 2004,
y: 6
}
]
},
{
id: "8",
data: [
{
x: 2000,
y: 11
},
{
x: 2001,
y: 2
},
{
x: 2002,
y: 5
},
{
x: 2003,
y: 9
},
{
x: 2004,
y: 5
}
]
},
{
id: "9",
data: [
{
x: 2000,
y: 10
},
{
x: 2001,
y: 3
},
{
x: 2002,
y: 8
},
{
x: 2003,
y: 3
},
{
x: 2004,
y: 11
}
]
},
{
id: "10",
data: [
{
x: 2000,
y: 8
},
{
x: 2001,
y: 10
},
{
x: 2002,
y: 10
},
{
x: 2003,
y: 1
},
{
x: 2004,
y: 8
}
]
},
{
id: "11",
data: [
{
x: 2000,
y: 4
},
{
x: 2001,
y: 8
},
{
x: 2002,
y: 1
},
{
x: 2003,
y: 6
},
{
x: 2004,
y: 12
}
]
},
{
id: "12",
data: [
{
x: 2000,
y: 9
},
{
x: 2001,
y: 7
},
{
x: 2002,
y: 4
},
{
x: 2003,
y: 11
},
{
x: 2004,
y: 10
}
]
}
];
const MyResponsiveBump = ({ data }) => (
<ResponsiveBump
data={data}
margin={{ top: 40, right: 100, bottom: 40, left: 60 }}
colors={{ scheme: "spectral" }}
lineWidth={3}
activeLineWidth={6}
inactiveLineWidth={3}
inactiveOpacity={0.15}
pointSize={10}
activePointSize={16}
inactivePointSize={0}
pointColor={{ theme: "background" }}
pointBorderWidth={3}
activePointBorderWidth={3}
pointBorderColor={{ from: "serie.color" }}
axisTop={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: "",
legendPosition: "middle",
legendOffset: -36
}}
axisRight={null}
axisBottom={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: "",
legendPosition: "middle",
legendOffset: 32
}}
axisLeft={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: "ranking",
legendPosition: "middle",
legendOffset: -40
}}
/>
);
export default function App() {
return (
<div style={{ height: 300, width: 400 }}>
<MyResponsiveBump data={data} />
</div>
);
}
We add the data for our our chart in the data array.
And we pass that into the data prop of the ResponsiveBump component.
The colors prop sets the series color.
lineWidth has the width of the lines in pixels.
activeLineWidth has the width of the lines in pixels.
We set similar settings with the pintSize .
pointColor has the point color.
pointBorderWidth has the point border width.
axisTop has the settings for the top axis.
tickSize has the tick size. tickPadding has the tick padding.
We have similar settings for axisBottom and axisLeft to configure the bottom and left axes.
Conclusion
We can add bump charts easily into our React app with Nivo.
