Category: React

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.

Heat Map

Nivo comes with code to let us add a heat map into our React app.

To install the required packages, we run:

npm i @nivo/heatmap

Then we can add the chart by writing:

import React from "react";
import { ResponsiveHeatMap } from "@nivo/heatmap";

const data = [
  {
    country: "AD",
    "hot dog": 93,
    "hot dogColor": "hsl(354, 70%, 50%)",
    burger: 91,
    burgerColor: "hsl(313, 70%, 50%)",
    sandwich: 66,
    sandwichColor: "hsl(102, 70%, 50%)",
    kebab: 85,
    kebabColor: "hsl(114, 70%, 50%)",
    fries: 70,
    friesColor: "hsl(37, 70%, 50%)",
    donut: 50,
    donutColor: "hsl(126, 70%, 50%)",
    junk: 27,
    junkColor: "hsl(342, 70%, 50%)",
    sushi: 45,
    sushiColor: "hsl(185, 70%, 50%)",
    ramen: 31,
    ramenColor: "hsl(139, 70%, 50%)",
    curry: 22,
    curryColor: "hsl(165, 70%, 50%)",
    udon: 66,
    udonColor: "hsl(181, 70%, 50%)"
  },
  {
    country: "AE",
    "hot dog": 55,
    "hot dogColor": "hsl(304, 70%, 50%)",
    burger: 93,
    burgerColor: "hsl(14, 70%, 50%)",
    sandwich: 54,
    sandwichColor: "hsl(224, 70%, 50%)",
    kebab: 85,
    kebabColor: "hsl(328, 70%, 50%)",
    fries: 52,
    friesColor: "hsl(305, 70%, 50%)",
    donut: 86,
    donutColor: "hsl(252, 70%, 50%)",
    junk: 61,
    junkColor: "hsl(39, 70%, 50%)",
    sushi: 77,
    sushiColor: "hsl(122, 70%, 50%)",
    ramen: 85,
    ramenColor: "hsl(230, 70%, 50%)",
    curry: 79,
    curryColor: "hsl(176, 70%, 50%)",
    udon: 44,
    udonColor: "hsl(129, 70%, 50%)"
  },
  {
    country: "AF",
    "hot dog": 49,
    "hot dogColor": "hsl(349, 70%, 50%)",
    burger: 10,
    burgerColor: "hsl(319, 70%, 50%)",
    sandwich: 28,
    sandwichColor: "hsl(219, 70%, 50%)",
    kebab: 37,
    kebabColor: "hsl(83, 70%, 50%)",
    fries: 21,
    friesColor: "hsl(242, 70%, 50%)",
    donut: 96,
    donutColor: "hsl(62, 70%, 50%)",
    junk: 19,
    junkColor: "hsl(43, 70%, 50%)",
    sushi: 73,
    sushiColor: "hsl(107, 70%, 50%)",
    ramen: 31,
    ramenColor: "hsl(288, 70%, 50%)",
    curry: 21,
    curryColor: "hsl(176, 70%, 50%)",
    udon: 99,
    udonColor: "hsl(20, 70%, 50%)"
  }
];

const MyResponsiveHeatMap = ({ data }) => (
  <ResponsiveHeatMap
    data={data}
    keys={[
      "hot dog",
      "burger",
      "sandwich",
      "kebab",
      "fries",
      "donut",
      "junk",
      "sushi",
      "ramen",
      "curry",
      "udon"
    ]}
    indexBy="country"
    margin={{ top: 100, right: 60, bottom: 60, left: 60 }}
    forceSquare={true}
    axisTop={{
      orient: "top",
      tickSize: 5,
      tickPadding: 5,
      tickRotation: -90,
      legend: "",
      legendOffset: 36
    }}
    axisRight={null}
    axisBottom={null}
    axisLeft={{
      orient: "left",
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "country",
      legendPosition: "middle",
      legendOffset: -40
    }}
    cellOpacity={1}
    cellBorderColor={{ from: "color", modifiers: [["darker", 0.4]] }}
    labelTextColor={{ from: "color", modifiers: [["darker", 1.8]] }}
    defs={[
      {
        id: "lines",
        type: "patternLines",
        background: "inherit",
        color: "rgba(0, 0, 0, 0.1)",
        rotation: -45,
        lineWidth: 4,
        spacing: 7
      }
    ]}
    fill={[{ id: "lines" }]}
    animate={true}
    motionConfig="wobbly"
    motionStiffness={80}
    motionDamping={9}
    hoverTarget="cell"
    cellHoverOthersOpacity={0.25}
  />
);

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

We have the data array with the number properties as the values to show.

And the properties with Color at the end has the background color for each square.

In the ResponsiveHeatMap component, we have the keys prop with the item names.

margin have the margins.

forceSquare makes the heatmap items square.

axisTop has the top axis settings.

orient has the text orientation. tickSize has the tick size.

tickPadding has the tick padding.

tickRotation has the text rotation angle.

legendOffset has the offset for the legend text in pixels.

axisRight and axisBottom are set to null since we don’t want to add them.

cellOpacity has the opacity of the heat map items.

cellBorderColor and labelTextColor have the cell border and label text colors respectively.

defs have the color scheme for the lines. We set it to patternLines to add the lines between the item.

fill have the fill color.

animate , motionConfig , motionStiffness , motionDamping have the settings for the animation when we hover over a cell.

cellHoverOthersOpacity have the opacity of the cells that we didn’t hover over when we hover a cell.

Then in App , we set the width and height so that we can show the chart.

Conclusion

We can add heat maps into our React app with Nivo.

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.

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.

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.

Map Chart

We can render the map chart with the Choropleth component.

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

npm i @nivo/geo

Then we add the chart by writing:

import React from "react";
import { ResponsiveChoropleth } from "@nivo/geo";
import countries from "./world-countries";

const data = [
  {
    id: "AFG",
    value: 928048
  },
  {
    id: "AGO",
    value: 704643
  },
  {
    id: "ALB",
    value: 641894
  }
];

const MyResponsiveChoropleth = ({ data }) => (
  <ResponsiveChoropleth
    data={data}
    features={countries.features}
    margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
    colors="nivo"
    domain={[0, 1000000]}
    unknownColor="#666666"
    label="properties.name"
    valueFormat=".2s"
    projectionTranslation={[0.5, 0.5]}
    projectionRotation={[0, 0, 0]}
    enableGraticule={true}
    graticuleLineColor="#dddddd"
    borderWidth={0.5}
    borderColor="#152538"
    legends={[
      {
        anchor: "bottom-left",
        direction: "column",
        justify: true,
        translateX: 20,
        translateY: -100,
        itemsSpacing: 0,
        itemWidth: 94,
        itemHeight: 18,
        itemDirection: "left-to-right",
        itemTextColor: "#444444",
        itemOpacity: 0.85,
        symbolSize: 18,
        effects: [
          {
            on: "hover",
            style: {
              itemTextColor: "#000000",
              itemOpacity: 1
            }
          }
        ]
      }
    ]}
  />
);

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

The world-countries.json file can be copied from https://raw.githubusercontent.com/plouc/nivo/master/website/src/data/components/geo/world_countries.json

The data array has the country code for the id value and the value has the value we display.

Then in MyResponsiveChoropleth component renders the ResponsiveChoropleth component that lets us set various options.

We use the features property from the world-countries JSON to display the countries.

domain has the domain for the data values.

projectionTranslation lets us translate the map.

projectionRotation lets us rotate the map.

label has the property oath from the JSON data to use as the label.

unknownColor has the full color for the countries when they have unknown values.

In the legends prop, we have various options.

anchor has the legend position.

direction has the direction for the list items.

itemWidth and itemHeight have the item dimensions.

itemTextColor have the item text color.

effects have the animation effect when we hover over the country with values.

We set the item text color and its opacity in the style property.

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

Conclusion

We can render a map chart in our React app with Nivo’s choropleth component.

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.

Bullet Chart

We can add bullet charts into our React app with Nivo.

First, we have to install the @nivo/bullet package by running:

npm i @nivo/bullet

Then, we can write:

import React from "react";
import { ResponsiveBullet } from "@nivo/bullet";

const data = [
  {
    id: "temp.",
    ranges: [36, 90, 12, 0, 140],
    measures: [24],
    markers: [140]
  },
  {
    id: "revenue",
    ranges: [2, 1, 3, 0, 9],
    measures: [5],
    markers: [8.804309547018528, 7.61823016825187]
  }
];

const MyResponsiveBullet = ({ data }) => (
  <ResponsiveBullet
    data={data}
    margin={{ top: 50, right: 90, bottom: 50, left: 90 }}
    spacing={46}
    titleAlign="start"
    titleOffsetX={-70}
    measureSize={0.2}
  />
);

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

to add the bullet chart.

The data array has the data that we want to render in the bullet chart.

ranges have the segment lengths.

measures have the measure values.

markers have the numbers with their own markers.

We render the chart with the ResponsiveBullet component.

margin has the margins.

spacing has the spacing of the values.

titleAlign has the title position.

measureSize have the measure sizes.

We set the width and height of the div in App so that the bullet chart will be rendered.

Calendar Charts

We can add calendar charts into our React app with Nivo.

First, we have to install the @nivo/calendar package by running:

npm i @nivo/calendar

Then we write:

import React from "react";
import { ResponsiveCalendar } from "@nivo/calendar";

const data = [
  {
    day: "2015-07-22",
    value: 284
  },
  {
    day: "2017-11-28",
    value: 219
  },
  {
    day: "2016-10-06",
    value: 12
  }
];

const MyResponsiveCalendar = ({ data }) => (
  <ResponsiveCalendar
    data={data}
    from="2015-03-01"
    to="2016-07-12"
    emptyColor="#eeeeee"
    colors={["#61cdbb", "#97e3d5", "#e8c1a0", "#f47560"]}
    margin={{ top: 40, right: 40, bottom: 40, left: 40 }}
    yearSpacing={40}
    monthBorderColor="#ffffff"
    dayBorderWidth={2}
    dayBorderColor="#ffffff"
    legends={[
      {
        anchor: "bottom-right",
        direction: "row",
        translateY: 36,
        itemCount: 4,
        itemWidth: 42,
        itemHeight: 36,
        itemsSpacing: 14,
        itemDirection: "right-to-left"
      }
    ]}
  />
);
export default function App() {
  return (
    <div style={{ width: 400, height: 300 }}>
      <MyResponsiveCalendar data={data} />
    </div>
  );
}

We have the day and value in the data array that we render with the ResponsiveCalendar component.

To render them, we pass them into the data prop to render them.

from and to restricts the date range we render.

emptyColor has the color of the empty squares.

colors have the color of the filled squares.

margin has the margins.

yearSpacing has the calendar year rectangle spacing in pixels.

monthBorderCooor and dayBorderColor have the border colors.

legends has the legend settings.

We can set the spacing, width, and height of the legend text.

Conclusion

We can render bullet and calendar charts in our React app with Nivo.