Add Charts into Our React App with Nivo — Marimekko Chart

Photo by William Iven 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.

Marimekko Chart

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

To install the required packages, we run:

npm i @nivo/marimekko

Then we can add the chart by writing:

import React from "react";
import { ResponsiveMarimekko } from "@nivo/marimekko";
const data = [
  {
    statement: "it's good",
    participation: 19,
    stronglyAgree: 12,
    agree: 30,
    disagree: 19,
    stronglyDisagree: 31
  },
  {
    statement: "it's sweet",
    participation: 11,
    stronglyAgree: 30,
    agree: 2,
    disagree: 1,
    stronglyDisagree: 16
  },
  {
    statement: "it's spicy",
    participation: 19,
    stronglyAgree: 15,
    agree: 22,
    disagree: 4,
    stronglyDisagree: 18
  }
];
const MyResponsiveMarimekko = ({ data }) => (
  <ResponsiveMarimekko
    data={data}
    id="statement"
    value="participation"
    dimensions={[
      {
        id: "disagree strongly",
        value: "stronglyDisagree"
      },
      {
        id: "disagree",
        value…