Add Charts into Our React App with Nivo

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.

Installation

We can start by installing the @nivo/core package by running:

npm i `@nivo/core`

Add a Chart

After we installed the package, we can add a chart.

We can add an area bump chart with the @nivo/bump package.

For instance, we can write:

import React from "react";
import { ResponsiveAreaBump } from "@nivo/bump";

const data = [
  {
    id: "JavaScript",
    data: [
      {
        x: 2000,
        y: 13
      },
      {
        x: 2001,
        y: 24
      },
      {
        x: 2002,
        y: 16
      },
      {
        x: 2003,
        y: 15
      },
      {
        x: 2004,
        y: 29
      },
      {
        x: 2005,
        y: 23
      }
    ]
  },
  {
    id: "ReasonML",
    data: [
      {
        x: 2000,
        y: 27
      },
      {
        x: 2001,
        y: 28
      },
      {
        x: 2002,
        y: 30
      },
      {
        x: 2003,
        y: 25
      },
      {
        x: 2004,
        y: 12
      },
      {
        x: 2005,
        y: 17
      }
    ]
  },
  {
    id: "TypeScript",
    data: [
      {
        x: 2000,
        y: 18
      },
      {
        x: 2001,
        y: 23
      },
      {
        x: 2002,
        y: 19
      },
      {
        x: 2003,
        y: 18
      },
      {
        x: 2004,
        y: 14
      },
      {
        x: 2005,
        y: 10
      }
    ]
  },
  {
    id: "Elm",
    data: [
      {
        x: 2000,
        y: 25
      },
      {
        x: 2001,
        y: 16
      },
      {
        x: 2002,
        y: 26
      },
      {
        x: 2003,
        y: 26
      },
      {
        x: 2004,
        y: 16
      },
      {
        x: 2005,
        y: 10
      }
    ]
  },
  {
    id: "CoffeeScript",
    data: [
      {
        x: 2000,
        y: 27
      },
      {
        x: 2001,
        y: 27
      },
      {
        x: 2002,
        y: 22
      },
      {
        x: 2003,
        y: 28
      },
      {
        x: 2004,
        y: 24
      },
      {
        x: 2005,
        y: 24
      }
    ]
  }
];

const MyResponsiveAreaBump = ({ data }) => (
  <ResponsiveAreaBump
    data={data}
    margin={{ top: 40, right: 100, bottom: 40, left: 100 }}
    spacing={8}
    colors={{ scheme: "nivo" }}
    blendMode="multiply"
    defs={[
      {
        id: "dots",
        type: "patternDots",
        background: "inherit",
        color: "#38bcb2",
        size: 4,
        padding: 1,
        stagger: true
      },
      {
        id: "lines",
        type: "patternLines",
        background: "inherit",
        color: "#eed312",
        rotation: -45,
        lineWidth: 6,
        spacing: 10
      }
    ]}
    fill={[
      {
        match: {
          id: "CoffeeScript"
        },
        id: "dots"
      },
      {
        match: {
          id: "TypeScript"
        },
        id: "lines"
      }
    ]}
    startLabel="id"
    axisTop={{
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "",
      legendPosition: "middle",
      legendOffset: -36
    }}
    axisBottom={{
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "",
      legendPosition: "middle",
      legendOffset: 32
    }}
  />
);

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

to add the chart.

We have to define the width and height of the wrapper div for the chart to render.

The data array has an array of data that we use to render the chart.

Next, we add the MyResponsiveAreaBump component to add the chart.

We set the data array as the value of the data prop.

margin has the margins.

spacing has the spacing between the bumps.

defs have the patterns for the bumps.

fill has the fill styles.

axisTop has the settings for the axes.

tickSize has the tick size. tickPadding has the tick padding.

axisBottom has the bottom axis settings.

Conclusion

We can add an area bump chart into our React app easily with Nivo.