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

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 }) => (
  <ResponsiveChoropleth
    data={data}
    features={countries.features}
    margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
    colors="nivo"
    domain={[0, 1000000]}
    unknownColor="#666666"
    label="properties.name"
    valueFormat=".2s"
    projectionTranslation={[0.5, 0.5]}
    projectionRotation={[0, 0, 0]}
    enableGraticule={true}
    graticuleLineColor="#dddddd"
    borderWidth={0.5}
    borderColor="#152538"
    legends={[
      {
        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} />
    </div>
  );
}

The world-countries.json file can be copied from https://raw.githubusercontent.com/plouc/nivo/master/website/src/data/components/geo/world_countries.json

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.

Conclusion

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