Add Charts into Our React App with Nivo — Map Choropleth Chart

Spread the love

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.

Map Chart

We can render the map chart with the Choropleth component.

To add it, we first have to install the @nivo/geo package by running:

npm i @nivo/geo

Then we add the chart by writing:

import React from "react";
import { ResponsiveChoropleth } from "@nivo/geo";
import countries from "./world-countries";

const data = [
    id: "AFG",
    value: 928048
    id: "AGO",
    value: 704643
    id: "ALB",
    value: 641894

const MyResponsiveChoropleth = ({ data }) => (
    margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
    domain={[0, 1000000]}
    projectionTranslation={[0.5, 0.5]}
    projectionRotation={[0, 0, 0]}
        anchor: "bottom-left",
        direction: "column",
        justify: true,
        translateX: 20,
        translateY: -100,
        itemsSpacing: 0,
        itemWidth: 94,
        itemHeight: 18,
        itemDirection: "left-to-right",
        itemTextColor: "#444444",
        itemOpacity: 0.85,
        symbolSize: 18,
        effects: [
            on: "hover",
            style: {
              itemTextColor: "#000000",
              itemOpacity: 1

export default function App() {
  return (
    <div style={{ width: 400, height: 300 }}>
      <MyResponsiveChoropleth data={data} />

The world-countries.json file can be copied from

The data array has the country code for the id value and the value has the value we display.

Then in MyResponsiveChoropleth component renders the ResponsiveChoropleth component that lets us set various options.

We use the features property from the world-countries JSON to display the countries.

domain has the domain for the data values.

projectionTranslation lets us translate the map.

projectionRotation lets us rotate the map.

label has the property oath from the JSON data to use as the label.

unknownColor has the full color for the countries when they have unknown values.

In the legends prop, we have various options.

anchor has the legend position.

direction has the direction for the list items.

itemWidth and itemHeight have the item dimensions.

itemTextColor have the item text color.

effects have the animation effect when we hover over the country with values.

We set the item text color and its opacity in the style property.

Then in App , we set the width and height of the div so we can render the chart.


We can render a map chart in our React app with Nivo’s choropleth component.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *