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

Stream Chart

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

To install the required packages, we run:

npm i @nivo/stream

Then we can create the chart by writing:

import React from "react";
import { ResponsiveStream } from "@nivo/stream";

const data = [
  {
    Raoul: 15,
    Josiane: 117,
    Marcel: 172,
    René: 72,
    Paul: 74,
    Jacques: 106
  },
  {
    Raoul: 58,
    Josiane: 43,
    Marcel: 49,
    René: 114,
    Paul: 45,
    Jacques: 158
  },
  {
    Raoul: 133,
    Josiane: 185,
    Marcel: 27,
    René: 36,
    Paul: 159,
    Jacques: 195
  }
];

const MyResponsiveStream = ({ data }) => (
  <ResponsiveStream
    data={data}
    keys={["Raoul", "Josiane", "Marcel", "René", "Paul", "Jacques"]}
    margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
    axisTop={null}
    axisRight={null}
    axisBottom={{
      orient: "bottom",
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "",
      legendOffset: 36
    }}
    axisLeft={{
      orient: "left",
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "",
      legendOffset: -40
    }}
    offsetType="silhouette"
    colors={{ scheme: "nivo" }}
    fillOpacity={0.85}
    borderColor={{ theme: "background" }}
    defs={[
      {
        id: "dots",
        type: "patternDots",
        background: "inherit",
        color: "#2c998f",
        size: 4,
        padding: 2,
        stagger: true
      },
      {
        id: "squares",
        type: "patternSquares",
        background: "inherit",
        color: "#e4c912",
        size: 6,
        padding: 2,
        stagger: true
      }
    ]}
    fill={[
      {
        match: {
          id: "Paul"
        },
        id: "dots"
      },
      {
        match: {
          id: "Marcel"
        },
        id: "squares"
      }
    ]}
    dotSize={8}
    dotColor={{ from: "color" }}
    dotBorderWidth={2}
    dotBorderColor={{ from: "color", modifiers: [["darker", 0.7]] }}
    legends={[
      {
        anchor: "bottom-right",
        direction: "column",
        translateX: 100,
        itemWidth: 80,
        itemHeight: 20,
        itemTextColor: "#999999",
        symbolSize: 12,
        symbolShape: "circle",
        effects: [
          {
            on: "hover",
            style: {
              itemTextColor: "#000000"
            }
          }
        ]
      }
    ]}
  />
);

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

We have the data for the chart in the data array.

Then we define the MyResponsiveStream component.

We set the value of the data prop to data to render the data in the chart.

keys have the property names with the values for the streams.

margin has the chart margins.

axisBottom and axisLeft have the x and y axes respectively.

tickSize has the tick size in pixels.

orient has the location of the ticks.

tickPadding has the tick padding in pixels.

legend has the legend label text.

legendOffset has the legend position.

offsetType has the offset type.

colors have the color scheme for the streams.

fillOpacity have the fill opacity for the streams.

borderColor have the color scheme for the border.

defs have the stream patterns.

background has the background styles.

color have the foreground color.

size has the tile size.

stagger sets whether we stagger the tiles or not.

fill have the fill styles, which we set in defs .

dotSize has the size of the dots in the stream.

dotColor has the color of the dots in the stream.

dotBorderWidth has the dot border width.

dotBorderColor have the border color.

legends have the legend item styles.

We have the translateX property to translate the items

itemWidth , itemHeight , and itemTextColor have the dimensions and color for the legend item text.

symbolSize and symbolShape have the legend item symbol size and shape.

effects have the hover effect for the legend items.

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

Conclusion

We can create a stream chart easily in our React app with Nivo.