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

Radar Chart

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

To install the required packages, we run:

npm i @nivo/radar

Then we can add the chart by writing:

import React from "react";
import { ResponsiveRadar } from "@nivo/radar";

const data = [
  {
    taste: "fruity",
    chardonay: 92,
    carmenere: 57,
    syrah: 92
  },
  {
    taste: "bitter",
    chardonay: 68,
    carmenere: 44,
    syrah: 55
  },
  {
    taste: "heavy",
    chardonay: 63,
    carmenere: 31,
    syrah: 26
  }
];

const MyResponsiveRadar = ({ data }) => (
  <ResponsiveRadar
    data={data}
    keys={["chardonay", "carmenere", "syrah"]}
    indexBy="taste"
    maxValue="auto"
    margin={{ top: 70, right: 80, bottom: 40, left: 80 }}
    curve="linearClosed"
    borderWidth={2}
    borderColor={{ from: "color" }}
    gridLevels={5}
    gridShape="circular"
    gridLabelOffset={36}
    enableDots={true}
    dotSize={10}
    dotColor={{ theme: "background" }}
    dotBorderWidth={2}
    dotBorderColor={{ from: "color" }}
    enableDotLabel={true}
    dotLabel="value"
    dotLabelYOffset={-12}
    colors={{ scheme: "nivo" }}
    fillOpacity={0.25}
    blendMode="multiply"
    animate={true}
    motionConfig="wobbly"
    isInteractive={true}
    legends={[
      {
        anchor: "top-left",
        direction: "column",
        translateX: -50,
        translateY: -40,
        itemWidth: 80,
        itemHeight: 20,
        itemTextColor: "#999",
        symbolSize: 12,
        symbolShape: "circle",
        effects: [
          {
            on: "hover",
            style: {
              itemTextColor: "#000"
            }
          }
        ]
      }
    ]}
  />
);

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

We define the data array to add the data for the radar chart.

Then we pass that into the data prop.

keys have the names for the legend items.

indexBy has the property name for the point text.

maxValue has the max value, which is automatically computed.

margin has the margins.

curve has the line style for the background.

borderWidth has the border width.

borderColor has the border color.

gridLeve;ls have the number of lines for the background.

gridShape has the grid shape.

dotSize has the point size.

dotBorderWidth and dotBorderColor have the dot border width and color.

fillOpacity have the fill opacity for the radar chart items.

animate andmotionConfig are the animation config.

isInteractive enables display when hovering over items.

legends have the legend settings.

We translate it and set the item dimensions.

effects have a hover effect when we hover over the legend items.

Then in App , we set the width and height to render the chart.

Conclusion

We can render radar charts easily in our React app with Nivo.