Add Charts into Our React App with Nivo — Marimekko 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.

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: "disagree"
      },
      {
        id: "agree",
        value: "agree"
      },
      {
        id: "agree strongly",
        value: "stronglyAgree"
      }
    ]}
    innerPadding={9}
    axisTop={null}
    axisRight={{
      orient: "right",
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "",
      legendOffset: 0
    }}
    axisBottom={{
      orient: "bottom",
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "participation",
      legendOffset: 36,
      legendPosition: "middle"
    }}
    axisLeft={{
      orient: "left",
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "opinions",
      legendOffset: -40,
      legendPosition: "middle"
    }}
    margin={{ top: 40, right: 80, bottom: 100, left: 80 }}
    colors={{ scheme: "spectral" }}
    borderWidth={1}
    borderColor={{ from: "color", modifiers: [["darker", 0.2]] }}
    defs={[
      {
        id: "lines",
        type: "patternLines",
        background: "rgba(0, 0, 0, 0)",
        color: "inherit",
        rotation: -45,
        lineWidth: 4,
        spacing: 8
      }
    ]}
    fill={[
      {
        match: {
          id: "agree strongly"
        },
        id: "lines"
      },
      {
        match: {
          id: "disagree strongly"
        },
        id: "lines"
      }
    ]}
    legends={[
      {
        anchor: "bottom",
        direction: "row",
        justify: false,
        translateX: 0,
        translateY: 80,
        itemsSpacing: 0,
        itemWidth: 140,
        itemHeight: 18,
        itemTextColor: "#999",
        itemDirection: "right-to-left",
        itemOpacity: 1,
        symbolSize: 18,
        symbolShape: "square",
        effects: [
          {
            on: "hover",
            style: {
              itemTextColor: "#000"
            }
          }
        ]
      }
    ]}
  />
);

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

We have the data array which has the bar segment values.

The bar segment values are the numeric properties.

In the MyResponsiveMarimekko component, we set the data prop to the data array.

value has the chart title.

dimensions have the property names with the bar segment values as the value of value .

innerPadding has the passing of the chart.

axisRight have the right axis.

We set the tick styles with tickSize , tickPadding , and tickRotation .

axisBottom have the bottom axis styles.

axisLeft have the left axis styles.

We shift the legend text with legendOffset .

margin has the margins.

colors have the colors.

borderColor have the chart border color.

defs has the styles for the background lines.

fill has the fill we want to set for some bar segments.

legends have the legend styles.

itemSpacing , itemWidth , itemHeight , itemTextColor , itemDirection have the item styles.

effects have the animation effect when we hover the legend items.

In App , we set width and height so that we can render the chart.

Conclusion

We can add bar charts with custom width bars with the Marimekko component that comes with Nivo.