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

Funnel Chart

We can render the chord chart with the ResponsiveChord component.

To add it, we first have to install the @nivo/funnel package by running:

npm i @nivo/funnel @nivo/tooltip prop-types @nivo/annotations @nivo/colors

Then we can add the chart by writing:

import React from "react";
import { ResponsiveFunnel } from "@nivo/funnel";

const data = [
  {
    id: "step_sent",
    value: 91922,
    label: "Sent"
  },
  {
    id: "step_viewed",
    value: 77979,
    label: "Viewed"
  },
  {
    id: "step_clicked",
    value: 43633,
    label: "Clicked"
  }
];

const MyResponsiveFunnel = ({ data }) => (
  <ResponsiveFunnel
    data={data}
    margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
    valueFormat=">-.4s"
    colors={{ scheme: "spectral" }}
    borderWidth={20}
    labelColor={{ from: "color", modifiers: [["darker", 3]] }}
    beforeSeparatorLength={100}
    beforeSeparatorOffset={20}
    afterSeparatorLength={100}
    afterSeparatorOffset={20}
    currentPartSizeExtension={10}
    currentBorderWidth={40}
    motionConfig="wobbly"
  />
);

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

We add the data for our chart with the data array.

value has the value to display.

The label will be shown when we hover over the funnel item.

In the ResponsiveFunnel component, we set the data prop to data to render the data.

margin has the margins.

valueFormat has the format the values on the chart.

colors has the color scheme for the funnel items.

labelColor has the color scheme for the label.

beforeSeparatorLength has the length before the separator lines.

beforeSeparatorOffset has the offset for the parts before the separator lines.

afterSeparatorLength has the length after the separator lines.

afterSeparatorOffset has the offset for the parts after the separator lines.

currentPartSizeExtension has the size to expand on each side when a funnel is active.

currentBorderWidth has the border width of the item that’s selected.

motionConfig has the animation effect when we hover over an item.

In App , we’ve to set the width and height of the wrapper div to render the chart.

Conclusion

We can add funnel chart into our React app with Nivo.