Author: John Au-Yeung

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.

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.

Bump Chart

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

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

npm i @nivo/bump

For instance, we can write:

import React from "react";
import { ResponsiveBump } from "@nivo/bump";

const data = [
  {
    id: "1",
    data: [
      {
        x: 2000,
        y: 7
      },
      {
        x: 2001,
        y: 11
      },
      {
        x: 2002,
        y: 2
      },
      {
        x: 2003,
        y: 5
      },
      {
        x: 2004,
        y: 1
      }
    ]
  },
  {
    id: "2",
    data: [
      {
        x: 2000,
        y: 6
      },
      {
        x: 2001,
        y: 9
      },
      {
        x: 2002,
        y: 7
      },
      {
        x: 2003,
        y: 4
      },
      {
        x: 2004,
        y: 7
      }
    ]
  },
  {
    id: "3",
    data: [
      {
        x: 2000,
        y: 12
      },
      {
        x: 2001,
        y: 6
      },
      {
        x: 2002,
        y: 6
      },
      {
        x: 2003,
        y: 12
      },
      {
        x: 2004,
        y: 2
      }
    ]
  },
  {
    id: "4",
    data: [
      {
        x: 2000,
        y: 5
      },
      {
        x: 2001,
        y: 1
      },
      {
        x: 2002,
        y: 3
      },
      {
        x: 2003,
        y: 2
      },
      {
        x: 2004,
        y: 4
      }
    ]
  },
  {
    id: "5",
    data: [
      {
        x: 2000,
        y: 2
      },
      {
        x: 2001,
        y: 4
      },
      {
        x: 2002,
        y: 11
      },
      {
        x: 2003,
        y: 8
      },
      {
        x: 2004,
        y: 3
      }
    ]
  },
  {
    id: "6",
    data: [
      {
        x: 2000,
        y: 1
      },
      {
        x: 2001,
        y: 5
      },
      {
        x: 2002,
        y: 9
      },
      {
        x: 2003,
        y: 10
      },
      {
        x: 2004,
        y: 9
      }
    ]
  },
  {
    id: "7",
    data: [
      {
        x: 2000,
        y: 3
      },
      {
        x: 2001,
        y: 12
      },
      {
        x: 2002,
        y: 12
      },
      {
        x: 2003,
        y: 7
      },
      {
        x: 2004,
        y: 6
      }
    ]
  },
  {
    id: "8",
    data: [
      {
        x: 2000,
        y: 11
      },
      {
        x: 2001,
        y: 2
      },
      {
        x: 2002,
        y: 5
      },
      {
        x: 2003,
        y: 9
      },
      {
        x: 2004,
        y: 5
      }
    ]
  },
  {
    id: "9",
    data: [
      {
        x: 2000,
        y: 10
      },
      {
        x: 2001,
        y: 3
      },
      {
        x: 2002,
        y: 8
      },
      {
        x: 2003,
        y: 3
      },
      {
        x: 2004,
        y: 11
      }
    ]
  },
  {
    id: "10",
    data: [
      {
        x: 2000,
        y: 8
      },
      {
        x: 2001,
        y: 10
      },
      {
        x: 2002,
        y: 10
      },
      {
        x: 2003,
        y: 1
      },
      {
        x: 2004,
        y: 8
      }
    ]
  },
  {
    id: "11",
    data: [
      {
        x: 2000,
        y: 4
      },
      {
        x: 2001,
        y: 8
      },
      {
        x: 2002,
        y: 1
      },
      {
        x: 2003,
        y: 6
      },
      {
        x: 2004,
        y: 12
      }
    ]
  },
  {
    id: "12",
    data: [
      {
        x: 2000,
        y: 9
      },
      {
        x: 2001,
        y: 7
      },
      {
        x: 2002,
        y: 4
      },
      {
        x: 2003,
        y: 11
      },
      {
        x: 2004,
        y: 10
      }
    ]
  }
];
const MyResponsiveBump = ({ data }) => (
  <ResponsiveBump
    data={data}
    margin={{ top: 40, right: 100, bottom: 40, left: 60 }}
    colors={{ scheme: "spectral" }}
    lineWidth={3}
    activeLineWidth={6}
    inactiveLineWidth={3}
    inactiveOpacity={0.15}
    pointSize={10}
    activePointSize={16}
    inactivePointSize={0}
    pointColor={{ theme: "background" }}
    pointBorderWidth={3}
    activePointBorderWidth={3}
    pointBorderColor={{ from: "serie.color" }}
    axisTop={{
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "",
      legendPosition: "middle",
      legendOffset: -36
    }}
    axisRight={null}
    axisBottom={{
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "",
      legendPosition: "middle",
      legendOffset: 32
    }}
    axisLeft={{
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "ranking",
      legendPosition: "middle",
      legendOffset: -40
    }}
  />
);

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

We add the data for our our chart in the data array.

And we pass that into the data prop of the ResponsiveBump component.

The colors prop sets the series color.

lineWidth has the width of the lines in pixels.

activeLineWidth has the width of the lines in pixels.

We set similar settings with the pintSize .

pointColor has the point color.

pointBorderWidth has the point border width.

axisTop has the settings for the top axis.

tickSize has the tick size. tickPadding has the tick padding.

We have similar settings for axisBottom and axisLeft to configure the bottom and left axes.

Conclusion

We can add bump charts 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.

Circle Packing Charts

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

First, we have to install the @nivo/circle-packing package by running:

npm i @nivo/circle-packing

Then we can add the bubble chart by writing:

import React from "react";
import { ResponsiveBubble } from "@nivo/circle-packing";

const root = {
  name: "nivo",
  color: "hsl(264, 70%, 50%)",
  children: [
    {
      name: "viz",
      color: "hsl(137, 70%, 50%)",
      children: [
        {
          name: "stack",
          color: "hsl(209, 70%, 50%)",
          children: [
            {
              name: "cchart",
              color: "hsl(323, 70%, 50%)",
              loc: 159163
            },
            {
              name: "xAxis",
              color: "hsl(77, 70%, 50%)",
              loc: 135760
            }
          ]
        },
        {
          name: "ppie",
          color: "hsl(344, 70%, 50%)",
          children: [
            {
              name: "chart",
              color: "hsl(97, 70%, 50%)",
              children: [
                {
                  name: "pie",
                  color: "hsl(238, 70%, 50%)",
                  children: [
                    {
                      name: "outline",
                      color: "hsl(65, 70%, 50%)",
                      loc: 196552
                    },
                    {
                      name: "slices",
                      color: "hsl(189, 70%, 50%)",
                      loc: 15332
                    }
                  ]
                }
              ]
            },
            {
              name: "legends",
              color: "hsl(129, 70%, 50%)",
              loc: 38994
            }
          ]
        }
      ]
    },
    {
      name: "colors",
      color: "hsl(291, 70%, 50%)",
      children: [
        {
          name: "rgb",
          color: "hsl(263, 70%, 50%)",
          loc: 38690
        },
        {
          name: "hsl",
          color: "hsl(267, 70%, 50%)",
          loc: 81691
        }
      ]
    },
    {
      name: "utils",
      color: "hsl(204, 70%, 50%)",
      children: [
        {
          name: "randomize",
          color: "hsl(17, 70%, 50%)",
          loc: 85412
        },
        {
          name: "resetClock",
          color: "hsl(13, 70%, 50%)",
          loc: 183588
        }
      ]
    },
    {
      name: "generators",
      color: "hsl(21, 70%, 50%)",
      children: [
        {
          name: "address",
          color: "hsl(8, 70%, 50%)",
          loc: 106057
        },
        {
          name: "city",
          color: "hsl(189, 70%, 50%)",
          loc: 179311
        },
        {
          name: "animal",
          color: "hsl(23, 70%, 50%)",
          loc: 19629
        },
        {
          name: "movie",
          color: "hsl(131, 70%, 50%)",
          loc: 80528
        },
        {
          name: "user",
          color: "hsl(357, 70%, 50%)",
          loc: 192122
        }
      ]
    },
    {
      name: "set",
      color: "hsl(337, 70%, 50%)",
      children: [
        {
          name: "clone",
          color: "hsl(129, 70%, 50%)",
          loc: 141963
        },
        {
          name: "intersect",
          color: "hsl(275, 70%, 50%)",
          loc: 74219
        }
      ]
    },
    {
      name: "text",
      color: "hsl(171, 70%, 50%)",
      children: [
        {
          name: "trim",
          color: "hsl(211, 70%, 50%)",
          loc: 44996
        },
        {
          name: "slugify",
          color: "hsl(333, 70%, 50%)",
          loc: 56664
        },
        {
          name: "snakeCase",
          color: "hsl(319, 70%, 50%)",
          loc: 22892
        },
        {
          name: "camelCase",
          color: "hsl(27, 70%, 50%)",
          loc: 66898
        },
        {
          name: "repeat",
          color: "hsl(22, 70%, 50%)",
          loc: 189697
        },
        {
          name: "padLeft",
          color: "hsl(40, 70%, 50%)",
          loc: 79534
        },
        {
          name: "padRight",
          color: "hsl(233, 70%, 50%)",
          loc: 170579
        },
        {
          name: "sanitize",
          color: "hsl(156, 70%, 50%)",
          loc: 23012
        },
        {
          name: "ploucify",
          color: "hsl(48, 70%, 50%)",
          loc: 18720
        }
      ]
    },
    {
      name: "misc",
      color: "hsl(165, 70%, 50%)",
      children: [
        {
          name: "greetings",
          color: "hsl(180, 70%, 50%)",
          children: [
            {
              name: "hey",
              color: "hsl(44, 70%, 50%)",
              loc: 123441
            },
            {
              name: "hi",
              color: "hsl(199, 70%, 50%)",
              loc: 40101
            }
          ]
        },
        {
          name: "other",
          color: "hsl(303, 70%, 50%)",
          loc: 94851
        },
        {
          name: "path",
          color: "hsl(260, 70%, 50%)",
          children: [
            {
              name: "pathA",
              color: "hsl(242, 70%, 50%)",
              loc: 142944
            },
            {
              name: "pathB",
              color: "hsl(315, 70%, 50%)",
              children: [
                {
                  name: "pathB1",
                  color: "hsl(183, 70%, 50%)",
                  loc: 11757
                },
                {
                  name: "pathB2",
                  color: "hsl(34, 70%, 50%)",
                  loc: 137471
                }
              ]
            },
            {
              name: "pathC",
              color: "hsl(223, 70%, 50%)",
              children: [
                {
                  name: "pathC1",
                  color: "hsl(322, 70%, 50%)",
                  loc: 197027
                },
                {
                  name: "pathC2",
                  color: "hsl(314, 70%, 50%)",
                  loc: 161292
                }
              ]
            }
          ]
        }
      ]
    }
  ]
};

const MyResponsiveBubble = ({ root }) => (
  <ResponsiveBubble
    root={root}
    margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
    identity="name"
    value="loc"
    colors={{ scheme: "nivo" }}
    padding={6}
    labelTextColor={{ from: "color", modifiers: [["darker", 0.8]] }}
    borderWidth={2}
    borderColor={{ from: "color" }}
    defs={[
      {
        id: "lines",
        type: "patternLines",
        background: "none",
        color: "inherit",
        rotation: -45,
        lineWidth: 5,
        spacing: 8
      }
    ]}
    fill={[{ match: { depth: 1 }, id: "lines" }]}
    animate={true}
    motionStiffness={90}
    motionDamping={12}
  />
);

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

We add the root object with the children properties to add an array of children objects.

Each object has the name , color , and loc properties.

name has a unique name for each item.

color has the color for each item. And loc has value.

In the MyResponsiveBubble component, we render the ResponsiveBubble component.

root has the data.

defs have the patterns for each circle.

labelTextColor have the text color for each circle label.

fill has the fill for each outer circle.

animate , motionStiffness , and motionDamping have the animation settings.

We also need the width and height on the outer div for the chart to render.

Conclusion

We can add circle packing charts 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.

Installation

We can start by installing the @nivo/core package by running:

npm i `@nivo/core`

Add a Chart

After we installed the package, we can add a chart.

We can add an area bump chart with the @nivo/bump package.

For instance, we can write:

import React from "react";
import { ResponsiveAreaBump } from "@nivo/bump";

const data = [
  {
    id: "JavaScript",
    data: [
      {
        x: 2000,
        y: 13
      },
      {
        x: 2001,
        y: 24
      },
      {
        x: 2002,
        y: 16
      },
      {
        x: 2003,
        y: 15
      },
      {
        x: 2004,
        y: 29
      },
      {
        x: 2005,
        y: 23
      }
    ]
  },
  {
    id: "ReasonML",
    data: [
      {
        x: 2000,
        y: 27
      },
      {
        x: 2001,
        y: 28
      },
      {
        x: 2002,
        y: 30
      },
      {
        x: 2003,
        y: 25
      },
      {
        x: 2004,
        y: 12
      },
      {
        x: 2005,
        y: 17
      }
    ]
  },
  {
    id: "TypeScript",
    data: [
      {
        x: 2000,
        y: 18
      },
      {
        x: 2001,
        y: 23
      },
      {
        x: 2002,
        y: 19
      },
      {
        x: 2003,
        y: 18
      },
      {
        x: 2004,
        y: 14
      },
      {
        x: 2005,
        y: 10
      }
    ]
  },
  {
    id: "Elm",
    data: [
      {
        x: 2000,
        y: 25
      },
      {
        x: 2001,
        y: 16
      },
      {
        x: 2002,
        y: 26
      },
      {
        x: 2003,
        y: 26
      },
      {
        x: 2004,
        y: 16
      },
      {
        x: 2005,
        y: 10
      }
    ]
  },
  {
    id: "CoffeeScript",
    data: [
      {
        x: 2000,
        y: 27
      },
      {
        x: 2001,
        y: 27
      },
      {
        x: 2002,
        y: 22
      },
      {
        x: 2003,
        y: 28
      },
      {
        x: 2004,
        y: 24
      },
      {
        x: 2005,
        y: 24
      }
    ]
  }
];

const MyResponsiveAreaBump = ({ data }) => (
  <ResponsiveAreaBump
    data={data}
    margin={{ top: 40, right: 100, bottom: 40, left: 100 }}
    spacing={8}
    colors={{ scheme: "nivo" }}
    blendMode="multiply"
    defs={[
      {
        id: "dots",
        type: "patternDots",
        background: "inherit",
        color: "#38bcb2",
        size: 4,
        padding: 1,
        stagger: true
      },
      {
        id: "lines",
        type: "patternLines",
        background: "inherit",
        color: "#eed312",
        rotation: -45,
        lineWidth: 6,
        spacing: 10
      }
    ]}
    fill={[
      {
        match: {
          id: "CoffeeScript"
        },
        id: "dots"
      },
      {
        match: {
          id: "TypeScript"
        },
        id: "lines"
      }
    ]}
    startLabel="id"
    axisTop={{
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "",
      legendPosition: "middle",
      legendOffset: -36
    }}
    axisBottom={{
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "",
      legendPosition: "middle",
      legendOffset: 32
    }}
  />
);

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

to add the chart.

We have to define the width and height of the wrapper div for the chart to render.

The data array has an array of data that we use to render the chart.

Next, we add the MyResponsiveAreaBump component to add the chart.

We set the data array as the value of the data prop.

margin has the margins.

spacing has the spacing between the bumps.

defs have the patterns for the bumps.

fill has the fill styles.

axisTop has the settings for the axes.

tickSize has the tick size. tickPadding has the tick padding.

axisBottom has the bottom axis settings.

Conclusion

We can add an area bump chart into our React app easily with Nivo.