Mastering Nivo Charts: A Comprehensive Guide to Data Visualization

Create stunning data visualizations with Nivo: examples, customization, and more

Chhakuli Zingare

August 9, 2024·15 min read

Share this article

Hello, data enthusiasts!

Are you ready to transform your data into stunning, interactive visualizations? Look no further than Nivo, a powerful charting library that allows you to create beautiful, responsive charts with ease.

In this blog, we’ll explore some of the most popular chart types available in Nivo, including Bar charts, Pie charts, Line charts, Bump charts, Calendar charts, and Box plots. We’ll provide practical examples for each chart type, complete with interactive CodeSandbox links that allow you to experiment with different styles and configurations.

Each example provided here is built using React. Whether you're working with a standard React project or a Next.js application, these examples will help you create stunning charts with ease.

Why Choose Nivo?

Nivo offers a wide range of chart types, built-in interactivity, and customizable styles, making it a go-to choice for developers looking to create dynamic data visualizations. Here are some key reasons to choose Nivo:

Rich Variety of Charts: Nivo supports numerous chart types, including Bar charts, Pie charts, Line charts, Bump charts, Calendar charts, Choropleth maps, and Box plots.
Highly Customizable: You can customize every aspect of your charts, from colors and labels to tooltips.
Responsive Design: Nivo charts are designed to be responsive, ensuring they look great on any device.
Interactive Elements: Add interactivity to your charts with tooltips, hover effects, and clickable elements.

Let’s explore some of the most popular chart types in Nivo with examples and custom styles.

1. Bar Chart

Overview: Bar charts are a staple for comparing categorical data. They use rectangular bars to represent different values, making it easy to see and compare quantities across categories.

Use Cases: Ideal for visualizing sales by region, product performance, or survey responses. They are straightforward and effective for displaying data trends and comparisons.

Key Features:

Horizontal or vertical bars
Customizable bar colors and spacing

import React, { useState } from "react"; import { ResponsiveBar } from "@nivo/bar"; const data = [ { country: "USA", sales: 500 }, { country: "China", sales: 300 }, { country: "Japan", sales: 200 }, { country: "Germany", sales: 100 }, ]; export const BarChart = () => { const [hoveredIndex, setHoveredIndex] = useState<number | null>(null); return ( <ResponsiveBar data={data} keys={["sales"]} indexBy="country" label="false" borderRadius={5} margin={{ top: 50, right: 130, bottom: 50, left: 60 }} padding={0.3} colors={({ index }) => (index === hoveredIndex ? "#4b05ad" : "#843DFF")} animate={true} axisBottom={{ tickSize: 5, tickPadding: 5, tickRotation: 0, legend: "Country", legendPosition: "middle", legendOffset: 32, }} axisLeft={{ tickSize: 5, tickPadding: 5, tickRotation: 0, legend: "Sales", legendPosition: "middle", legendOffset: -40, }} onMouseEnter={(data) => { setHoveredIndex(data.index); }} onMouseLeave={() => { setHoveredIndex(null); }} tooltip={({ id, value }) => ( <div style={{ borderRadius: "0.75rem", border: "1px solid #e5e7eb", backgroundColor: "#ffffff", padding: "1rem", boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", }} > <div style={{ display: "flex", alignItems: "center", gap: "1rem", }} > <div style={{ width: "0.25rem", borderRadius: "0.25rem", alignSelf: "stretch", backgroundColor: "#843dff", }} ></div> <div style={{ flex: 1 }}> <strong style={{ display: "block", fontWeight: 500, fontSize: "1rem", lineHeight: "1rem", color: "#9d99a8", }} > {id} </strong> <span style={{ fontSize: "1.125rem", lineHeight: "1.875rem", color: "#1e1c24", }} > Sales: <span style={{ fontWeight: 600 }}>{value}</span> </span> </div> </div> </div> )} theme={{ axis: { ticks: { text: { fill: "#7E7988", }, }, }, grid: { line: { stroke: "#F3F3F4", strokeWidth: 1, }, }, }} /> ); };

import React, { useState } from "react"; import { ResponsivePie } from "@nivo/pie"; interface PieData { id: string; value: number; } const data: PieData[] = [ { id: "USA", value: 500 }, { id: "China", value: 300 }, { id: "Japan", value: 200 }, { id: "Germany", value: 100 }, ]; export const PieChart: React.FC = () => { const [hoveredId, setHoveredId] = useState<string | null>(null); const getColor = (id: string) => { const colors: Record<string, string> = { USA: "#7916ff", China: "#843dff", Japan: "#9f75ff", Germany: "#bea6ff", }; return colors[id] || "#843DFF"; }; return ( <ResponsivePie data={data} margin={{ top: 50, right: 50, bottom: 50, left: 50 }} innerRadius={0.5} padAngle={0.7} cornerRadius={3} colors={({ id }) => (id === hoveredId ? "#4b05ad" : getColor(id))} borderWidth={1} borderColor={{ from: "color", modifiers: [["darker", 0.2]] }} radialLabel={(d) => `${d.id}: ${d.value}`} sliceLabel={(d) => `${d.value}`} animate={true} motionConfig="slow" onMouseEnter={({ id }) => setHoveredId(id)} onMouseLeave={() => setHoveredId(null)} tooltip={({ datum }) => ( <div style={{ borderRadius: "0.75rem", border: "1px solid #e5e7eb", backgroundColor: "#ffffff", padding: "1rem", boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", }} > <div style={{ display: "flex", alignItems: "center", gap: "1rem", }} > <div style={{ width: "0.25rem", borderRadius: "0.25rem", alignSelf: "stretch", backgroundColor: "#843dff", }} ></div> <div style={{ flex: 1 }}> <strong style={{ display: "block", fontWeight: 500, fontSize: "1rem", lineHeight: "1rem", color: "#9d99a8", }} > {datum.id} </strong> <span style={{ fontSize: "1.125rem", lineHeight: "1.875rem", color: "#1e1c24", }} > Value: <span style={{ fontWeight: 600 }}>{datum.value}</span> </span> </div> </div> </div> )} theme={{ legends: { text: { fontSize: 14, fill: "#7E7988", }, }, }} /> ); };

import { ResponsiveLine } from "@nivo/line"; const data = [ { id: "purple line", color: "#843DFF", data: [ { x: 10, y: 200 }, { x: 20, y: 360 }, { x: 30, y: 180 }, { x: 40, y: 50 }, { x: 50, y: 240 }, { x: 60, y: 160 }, ], }, { id: "gray line", color: "#908C9B", data: [ { x: 10, y: 100 }, { x: 20, y: 250 }, { x: 30, y: 90 }, { x: 40, y: 230 }, { x: 50, y: 140 }, { x: 60, y: 80 }, ], }, ]; export const LineChart = () => ( <div style={{ height: "400px", width: "100%" }}> <ResponsiveLine data={data} margin={{ top: 50, right: 110, bottom: 50, left: 60 }} xScale={{ type: "point" }} yScale={{ type: "linear", min: 0, max: 400, stacked: false, reverse: false, }} yFormat=" >-$d" curve="monotoneX" axisTop={null} axisRight={null} axisBottom={{ tickSize: 5, tickPadding: 5, tickRotation: 0, legend: "x axis", legendOffset: 36, legendPosition: "middle", }} axisLeft={{ tickSize: , , , "", , "", () => `$${v}`, }} enableGridX={false} colors={(d) => d.color} lineWidth={3} pointSize={10} pointColor={{ from: "color" }} pointBorderWidth={2} pointBorderColor={{ theme: "background" }} pointLabelYOffset={-12} useMesh={true} gridYValues={[0, 100, 200, 300, 400]} theme={{ grid: { line: { stroke: "#e0e0e0", strokeWidth: 1, }, }, axis: { domain: { line: { stroke: "transparent", }, }, }, }} defs={[ { id: "dashed", type: "patternLines", background: "inherit", color: "hsl(0, 0%, 70%)", rotation: -45, lineWidth: 2, spacing: 5, }, ]} tooltip={({ point }) => ( {point.serieId} {point.data.xFormatted}:{" "} {point.data.yFormatted} )} fill={[{ match: { id: "gray line" }, id: "dashed" }]} legends={[ { anchor: "bottom-right", direction: "column", justify: false, translateX: 100, translateY: 0, itemsSpacing: 0, itemDirection: "left-to-right", itemWidth: 80, itemHeight: 20, itemOpacity: 0.75, symbolSize: 12, symbolShape: "circle", symbolBorderColor: "rgba(0, 0, 0, .5)", effects: [ { on: "hover", style: { itemBackground: "rgba(0, 0, 0, .03)", itemOpacity: 1, }, }, ], }, ]} /> );

import { ResponsiveBump } from "@nivo/bump"; interface BumpData { id: string; data: { x: string; y: number }[]; } const data: BumpData[] = [ { id: "Product A", data: [ { x: "Jan", y: 4 }, { x: "Feb", y: 6 }, { x: "Mar", y: 3 }, { x: "Apr", y: 5 }, ], }, { id: "Product B", data: [ { x: "Jan", y: 5 }, { x: "Feb", y: 4 }, { x: "Mar", y: 6 }, { x: "Apr", y: 7 }, ], }, ]; export const BumpChart: React.FC = () => { // Define colors for each line const getColor = (id: string) => { const colors: Record<string, string> = { "Product A": "#2c0076", "Product B": "#f87171", }; return colors[id] || "#843DFF"; }; return ( <ResponsiveBump data={data} margin={{ top: 50, right: 70, bottom: 50, left: 50 }} colors={({ id }) => getColor(id)} lineWidth={3} pointSize={10} pointBorderWidth={2} pointBorderColor={{ from: "color", modifiers: [["darker", 0.2]] }} useMesh={true} axisBottom={{ tickSize: 5, tickPadding: 5, tickRotation: 0, legend: "Month", legendOffset: 32, legendPosition: "middle", }} axisLeft={{ tickSize: 5, tickPadding: 5, tickRotation: 0, legend: "Value", legendOffset: -40, legendPosition: "middle", }} pointTooltip={({ point }) => { return ( <div style={{ borderRadius: "0.75rem", border: "1px solid #e5e7eb", backgroundColor: "#ffffff", padding: "1rem", boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", }} > <div style= "", "", "", }} > {point.serie.id} {point.x} : {point.y} ); }} theme={{ axis: { ticks: { text: { fill: "#7E7988", }, }, }, grid: { line: { stroke: "#F3F3F4", strokeWidth: 1, }, }, }} /> ); };

import React from "react"; import { ResponsiveCalendar } from "@nivo/calendar"; interface CalendarData { day: string; value: number; } const data: CalendarData[] = [ { day: "2024-01-01", value: 12 }, { day: "2024-01-02", value: 15 }, { day: "2024-01-03", value: 15 }, { day: "2024-02-04", value: 20 }, { day: "2024-02-04", value: 10 }, { day: "2024-03-23", value: 12 }, { day: "2024-04-04", value: 20 }, { day: "2024-04-04", value: 28 }, { day: "2024-05-20", value: 24 }, { day: "2024-06-14", value: 20 }, // Add more data points as needed ]; const CalendarChart: React.FC = () => { const getColor = (value: number) => { if (value > 20) return "#15803d"; // High value color if (value > 10) return "#22c55e"; // Medium value color return "#4ade80"; // Low value color }; return ( <ResponsiveCalendar data={data} from="2024-01-01" to="2024-12-31" emptyColor="#eeeeee" colors={data.map(({ value }) => getColor(value))} margin={{ top: 10, right: 10, bottom: 10, left: 20 }} dayBorderWidth={2} dayBorderColor="#ffffff" monthBorderColor="#ffffff" yearLegendWidth={60} monthLegendHeight={20} dayLegendFormat="%d" tooltip={({ day, value }) => ( <div style={{ borderRadius: "0.75rem", border: "1px solid #e5e7eb", backgroundColor: "#ffffff", padding: "1rem", boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", }} > <div style={{ display: "flex", alignItems: "center", gap: "1rem", }} > <div = "", "", "", "#", }} > {new Date(day).toDateString()} Value: {value} )} theme={{ axis: { ticks: { text: { fill: "#7E7988", }, }, }, grid: { line: { stroke: "#F3F3F4", strokeWidth: 1, }, }, }} /> ); }; export default CalendarChart;

import { ResponsiveBoxPlot } from "@nivo/boxplot"; //data is in sandbox export const BoxPlotChart = () => { return ( <ResponsiveBoxPlot data={data} margin={{ top: 60, right: 140, bottom: 60, left: 60 }} minValue={0} maxValue={10} subGroupBy="subgroup" padding={0.12} enableGridX={true} axisTop={{ tickSize: 5, tickPadding: 5, tickRotation: 0, legend: "", legendOffset: 36, truncateTickAt: 0, }} axisRight={{ tickSize: 5, tickPadding: 5, tickRotation: 0, legend: "", legendOffset: 0, truncateTickAt: 0, }} axisBottom={{ tickSize: 5, tickPadding: 5, tickRotation: 0, legend: "group", legendPosition: "middle", legendOffset: 32, truncateTickAt: 0, }} axisLeft={{ tickSize: 5, tickPadding: 5, tickRotation: 0, legend: "value", legendPosition: "middle", legendOffset: -40, truncateTickAt: 0, }} colors={{ scheme: "pastel1" }} opacity={0.4} borderRadius={2} borderWidth={2} borderColor={{ from: "color", modifiers: [["darker", 0.3]], }} medianWidth={2} medianColor={{ from: "color", modifiers: [["darker", 0.3]], }} whiskerEndSize={0.6} whiskerColor={{ from: "color", modifiers: [["darker", 0.3]], }} motionConfig="stiff" legends={[ { anchor: "right", direction: "column", justify: false, translateX: 100, translateY: 0, itemWidth: 60, itemHeight: 20, itemsSpacing: 3, itemTextColor: "#999", itemDirection: "left-to-right", symbolSize: 20, symbolShape: "square", effects: [ { on: "hover", style: { itemTextColor: "#000", }, }, ], }, ]} /> ); };

Services

Case Studies

About CreoWis

Culture

InterMentorship

Hatch-n-Hype

Meet Our People

Careers at CreoWis

Blog

Let's Talk

Mastering Nivo Charts: A Comprehensive Guide to Data Visualization

Why Choose Nivo?

1. Bar Chart

Installation

Implementation

2. Pie Chart

Installation

Implementation

3. Line Chart

Installation

Implementation

4. Bump Chart

Installation

Implementation

5. Calendar Chart

Installation

Implementation

6. Box Plot Chart

Installation

Implementation

Conclusion