Add Charts into Our React App with Nivo — Scatter Plot

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.

Scatter Plot

Nivo comes with code to let us add a scatter plot into our React app.

To install the required packages, we run:

npm i @nivo/scatterplot

Then we can create the chart by writing:

import React from "react";
import { ResponsiveScatterPlot } from "[@nivo/scatterplot](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fnivo%2Fscatterplot "Twitter profile for @nivo/scatterplot")";

const data = [
  {
    id: "group A",
    data: [
      {
        x: 59,
        y: 119
      },
      {
        x: 97,
        y: 10
      },
      {
        x: 3,
        y: 60
      }
    ]
  },
  {
    id: "group B",
    data: [
      {
        x: 44,
        y: 56
      },
      {
        x: 14,
        y: 108
      },
      {
        x: 62,
        y: 97
      }
    ]
  },
  {
    id: "group C",
    data: [
      {
        x: 40,
        y: 82
      },
      {
        x: 79,
        y: 7
      },
      {
        x: 7,
        y: 36
      }
    ]
  },
  {
    id: "group E",
    data: [
      {
        x: 43,
        y: 61
      },
      {
        x: 12,
        y: 80
      },
      {
        x: 43,
        y: 60
      }
    ]
  }
];

const MyResponsiveScatterPlot = ({ data }) => (
  <ResponsiveScatterPlot
    data={data}
    margin={{ top: 60, right: 140, bottom: 70, left: 90 }}
    xScale={{ type: "linear", min: 0, max: "auto" }}
    xFormat={function (e) {
      return e + " g";
    }}
    yScale={{ type: "linear", min: 0, max: "auto" }}
    yFormat={function (e) {
      return e + " m";
    }}
    blendMode="multiply"
    axisTop={null}
    axisRight={null}
    axisBottom={{
      orient: "bottom",
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "weight",
      legendPosition: "middle",
      legendOffset: 46
    }}
    axisLeft={{
      orient: "left",
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "size",
      legendPosition: "middle",
      legendOffset: -60
    }}
    legends={[
      {
        anchor: "bottom-right",
        direction: "column",
        justify: false,
        translateX: 130,
        translateY: 0,
        itemWidth: 100,
        itemHeight: 12,
        itemsSpacing: 5,
        itemDirection: "left-to-right",
        symbolSize: 12,
        symbolShape: "circle",
        effects: [
          {
            on: "hover",
            style: {
              itemOpacity: 1
            }
          }
        ]
      }
    ]}
  />
);

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

We have the data array with objects that have the id and data properties.

x and y have the x and y coordinates of the points for the scatterplot.

Next, we create the MyResponsiveScatterPlot component.

We set the data prop to data to render the chart data.

margin has the margins.

xScale has the scale for the x-axis.

xFormat has a function to return the text for the x coordinate label text.

yScale has the scale for the x-axis.

yFormat has a function to return the text for the x coordinate label text.

blendMode has the value of the CSS mix-blend-mode property.

axisBottom and axisLeft have styles for the x and y axes respectively.

tickSize has the tick size in pixels.

tickPadding has the tick padding.

tickRotation has the angle of the text in degrees.

legend has the legend text.

legendPosition has the position.

And legendOffset has the legend position in pixels.

The legends prop has more options for the legend items.

We have the translate properties to translate the items.

item properties set the item dimensions, direction, and spacing.

symbolSize and symbolShape has the size and shape of the legend symbol respectively.

effects have the effect property.

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

Conclusion

We can render a scatter plot in a React app with Nivo.