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

Chord Chart

We can render the map chart with the Choropleth component.

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

npm i @nivo/chord

Then we can add the chart by writing:

import React from "react";
import { ResponsiveChord } from "@nivo/chord";

const data = [
  [201, 103, 90, 59, 56],
  [867, 1927, 346, 457, 410],
  [256, 441, 204, 318, 90],
  [215, 420, 491, 481, 1769],
  [917, 834, 396, 312, 385]
];

const MyResponsiveChord = ({ matrix }) => (
  <ResponsiveChord
    matrix={matrix}
    keys={["John", "Raoul", "Jane", "Marcel", "Ibrahim"]}
    margin={{ top: 60, right: 60, bottom: 90, left: 60 }}
    valueFormat=".2f"
    padAngle={0.02}
    innerRadiusRatio={0.96}
    innerRadiusOffset={0.02}
    arcOpacity={1}
    arcBorderWidth={1}
    arcBorderColor={{ from: "color", modifiers: [["darker", 0.4]] }}
    ribbonOpacity={0.5}
    ribbonBorderWidth={1}
    ribbonBorderColor={{ from: "color", modifiers: [["darker", 0.4]] }}
    enableLabel={true}
    label="id"
    labelOffset={12}
    labelRotation={-90}
    labelTextColor={{ from: "color", modifiers: [["darker", 1]] }}
    colors={{ scheme: "nivo" }}
    isInteractive={true}
    arcHoverOpacity={1}
    arcHoverOthersOpacity={0.25}
    ribbonHoverOpacity={0.75}
    ribbonHoverOthersOpacity={0.25}
    animate={true}
    motionStiffness={90}
    motionDamping={7}
    legends={[
      {
        anchor: "bottom",
        direction: "row",
        justify: false,
        translateX: 0,
        translateY: 70,
        itemWidth: 80,
        itemHeight: 14,
        itemsSpacing: 0,
        itemTextColor: "#999",
        itemDirection: "left-to-right",
        symbolSize: 12,
        symbolShape: "circle",
        effects: [
          {
            on: "hover",
            style: {
              itemTextColor: "#000"
            }
          }
        ]
      }
    ]}
  />
);

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

We have a nested array of numbers for the data.

Then we create the MyResponsiveChord component to render the ResponsiveChord component to render the chord chart.

We pass in the data to the matrix prop to render the nested array of numbers.

The keys prop has an array of names for the legend. They correspond to the numbers in each nested array.

margin has the margins.

valueFormat has the format for the numbers on the chart.

innerRadiusRatio has the length of the inner radius.

arcOpacity has the arc opacity. arcBorderWidth has each arc’s border width in pisels.

arcBorderColor has the arcs’ border colors.

We also set the label options with the label props.

label has the string to specify how to get the label text.

labelOffset has the label position offset in pixels.

labelRotation has the number of degrees to rotate the labels.

labelTextColor has the source of the colors for the chart.

colors have the color scheme to use to color the chart.

isInteractive lets us set whether the chart can be hovered over.

arcHoverOpacity has the opacity of the arc that we hovered over the chart.

arcHoverOthersOpacity has the opacity of the arc that we didn’t hover over the chart when our mouse is over the chart.

animate , motionStiffness , and motionDamping has the animation options.

legends has the legends options.

itemWidth , itemHeight , itemSpacing has the legend items dimensions and spacing.

itemTextColor has the item text color.

We translate the legend labels with the translate properties.

In App , we set the width and height so we can render the ResponsiveChord component.

Conclusion

We can add a chord chart easily into our React app with Nivo.