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.
Bullet Chart
We can add bullet charts into our React app with Nivo.
First, we have to install the @nivo/bullet package by running:
npm i @nivo/bullet
Then, we can write:
import React from "react";
import { ResponsiveBullet } from "@nivo/bullet";
const data = [
{
id: "temp.",
ranges: [36, 90, 12, 0, 140],
measures: [24],
markers: [140]
},
{
id: "revenue",
ranges: [2, 1, 3, 0, 9],
measures: [5],
markers: [8.804309547018528, 7.61823016825187]
}
];
const MyResponsiveBullet = ({ data }) => (
<ResponsiveBullet
data={data}
margin={{ top: 50, right: 90, bottom: 50, left: 90 }}
spacing={46}
titleAlign="start"
titleOffsetX={-70}
measureSize={0.2}
/>
);
export default function App() {
return (
<div style={{ width: 400, height: 150 }}>
<MyResponsiveBullet data={data} />
</div>
);
}
to add the bullet chart.
The data array has the data that we want to render in the bullet chart.
ranges have the segment lengths.
measures have the measure values.
markers have the numbers with their own markers.
We render the chart with the ResponsiveBullet component.
margin has the margins.
spacing has the spacing of the values.
titleAlign has the title position.
measureSize have the measure sizes.
We set the width and height of the div in App so that the bullet chart will be rendered.
Calendar Charts
We can add calendar charts into our React app with Nivo.
First, we have to install the @nivo/calendar package by running:
npm i @nivo/calendar
Then we write:
import React from "react";
import { ResponsiveCalendar } from "@nivo/calendar";
const data = [
{
day: "2015-07-22",
value: 284
},
{
day: "2017-11-28",
value: 219
},
{
day: "2016-10-06",
value: 12
}
];
const MyResponsiveCalendar = ({ data }) => (
<ResponsiveCalendar
data={data}
from="2015-03-01"
to="2016-07-12"
emptyColor="#eeeeee"
colors={["#61cdbb", "#97e3d5", "#e8c1a0", "#f47560"]}
margin={{ top: 40, right: 40, bottom: 40, left: 40 }}
yearSpacing={40}
monthBorderColor="#ffffff"
dayBorderWidth={2}
dayBorderColor="#ffffff"
legends={[
{
anchor: "bottom-right",
direction: "row",
translateY: 36,
itemCount: 4,
itemWidth: 42,
itemHeight: 36,
itemsSpacing: 14,
itemDirection: "right-to-left"
}
]}
/>
);
export default function App() {
return (
<div style={{ width: 400, height: 300 }}>
<MyResponsiveCalendar data={data} />
</div>
);
}
We have the day and value in the data array that we render with the ResponsiveCalendar component.
To render them, we pass them into the data prop to render them.
from and to restricts the date range we render.
emptyColor has the color of the empty squares.
colors have the color of the filled squares.
margin has the margins.
yearSpacing has the calendar year rectangle spacing in pixels.
monthBorderCooor and dayBorderColor have the border colors.
legends has the legend settings.
We can set the spacing, width, and height of the legend text.
Conclusion
We can render bullet and calendar charts in our React app with Nivo.
