Add Charts into Our React App with Nivo — Parallel Coordinates Chart

Photo by Will Suddreth on Unsplash

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.

Parallel Coordinates Chart

Nivo comes with code to let us add a parallel coordinates chart into our React app.

To install the required packages, we run:

npm i @nivo/parallel-coordinates

Then we can add the chart by writing:

import React from "react";
import { ResponsiveParallelCoordinates } from "@nivo/parallel-coordinates";
const data = [
  {
    temp: 24,
    cost: 32344,
    color: "green",
    target: "D",
    volume: 3.32478102470854
  },
  {
    temp: 19,
    cost: 100448,
    color: "green",
    target: "E",
    volume: 5.052307538977317
  },
  {
    temp: 32,
    cost: 266169,
    color: "yellow",
    target: "D",
    volume: 4.657311172596244
  },
  {
    temp: 8,
    cost: 84370,
    color: "green",
    target: "D",
    volume: 0.6268058953310531
  },
  {
    temp: 21,
    cost: 304422,
    color: "red",
    target: "D",
    volume: 3.3590163049771173
  },
  {
    temp: -7,
    cost: 152254,
    color: "yellow",
    target: "C",
    volume: 6.019571437532089
  },
  {…