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.

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.

Nivo 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.

Pie Chart

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

To install the required packages, we run:

npm i @nivo/pie

Then we can add the chart by writing:

import React from "react";
import { ResponsivePie } from "@nivo/pie";

const data = [
  {
    id: "c",
    label: "c",
    value: 120,
    color: "hsl(271, 70%, 50%)"
  },
  {
    id: "stylus",
    label: "stylus",
    value: 174,
    color: "hsl(292, 70%, 50%)"
  },
  {
    id: "go",
    label: "go",
    value: 225,
    color: "hsl(47, 70%, 50%)"
  }
];

const MyResponsivePie = ({ data }) => (
  <ResponsivePie
    data={data}
    margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
    innerRadius={0.5}
    padAngle={0.7}
    cornerRadius={3}
    colors={{ scheme: "nivo" }}
    borderWidth={1}
    borderColor={{ from: "color", modifiers: [["darker", 0.2]] }}
    radialLabelsSkipAngle={10}
    radialLabelsTextColor="#333333"
    radialLabelsLinkColor={{ from: "color" }}
    sliceLabelsSkipAngle={10}
    sliceLabelsTextColor="#333333"
    defs={[
      {
        id: "dots",
        type: "patternDots",
        background: "inherit",
        color: "rgba(255, 255, 255, 0.3)",
        size: 4,
        padding: 1,
        stagger: true
      },
      {
        id: "lines",
        type: "patternLines",
        background: "inherit",
        color: "rgba(255, 255, 255, 0.3)",
        rotation: -45,
        lineWidth: 6,
        spacing: 10
      }
    ]}
    fill={[
      {
        match: {
          id: "ruby"
        },
        id: "dots"
      },
      {
        match: {
          id: "c"
        },
        id: "dots"
      },
      {
        match: {
          id: "go"
        },
        id: "dots"
      },
      {
        match: {
          id: "python"
        },
        id: "dots"
      },
      {
        match: {
          id: "scala"
        },
        id: "lines"
      },
      {
        match: {
          id: "lisp"
        },
        id: "lines"
      },
      {
        match: {
          id: "elixir"
        },
        id: "lines"
      },
      {
        match: {
          id: "javascript"
        },
        id: "lines"
      }
    ]}
    legends={[
      {
        anchor: "bottom",
        direction: "row",
        justify: false,
        translateX: 0,
        translateY: 56,
        itemsSpacing: 0,
        itemWidth: 100,
        itemHeight: 18,
        itemTextColor: "#999",
        itemDirection: "left-to-right",
        itemOpacity: 1,
        symbolSize: 18,
        symbolShape: "circle",
        effects: [
          {
            on: "hover",
            style: {
              itemTextColor: "#000"
            }
          }
        ]
      }
    ]}
  />
);

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

We define the data array with the pie data.

label has the pie chunk labels.

value has the pie chunk size values.

Then add the ResponsivePie component into our chart.

margin has the margins.

data has the pie chart data.

innerRadius has the inner radius size.

colors have the color scheme for the pie slices.

borderWidth has the border width.

borderColor has the border-color scheme.

radialLabelsSkipAngle defines the angle threshold for when the label is hidden.

If it’s smaller than the given size, then the label is hidden.

radialLabelsTextColor has the text color of the pie.

radialLabelsLinkColor has the labels link color.

sliceLabelsSkipAngle has the angle threshold for skipping rendering the slice label.

If it’s smaller than the given threshold, then the slice label is hidden.

sliceLabelsTextColor has the text color.

defs have the pattern definitions for the slices.

color have the pattern color.

type has the pattern type.

fill has the fill color for the slices and legend.

legends has the legend settings.

itemSpacing , itemWidth , itemHeight , itemTextColor , and itemDirection has the item dimensions, spacing, and color.

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

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

Conclusion

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

Parallel Coordinates Chart

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

To install the required packages, we run:

npm i @nivo/parallel-coordinates

Then we can add the chart by writing:

import React from "react";
import { ResponsiveParallelCoordinates } from "@nivo/parallel-coordinates";

const data = [
  {
    temp: 24,
    cost: 32344,
    color: "green",
    target: "D",
    volume: 3.32478102470854
  },
  {
    temp: 19,
    cost: 100448,
    color: "green",
    target: "E",
    volume: 5.052307538977317
  },
  {
    temp: 32,
    cost: 266169,
    color: "yellow",
    target: "D",
    volume: 4.657311172596244
  },
  {
    temp: 8,
    cost: 84370,
    color: "green",
    target: "D",
    volume: 0.6268058953310531
  },
  {
    temp: 21,
    cost: 304422,
    color: "red",
    target: "D",
    volume: 3.3590163049771173
  },
  {
    temp: -7,
    cost: 152254,
    color: "yellow",
    target: "C",
    volume: 6.019571437532089
  },
  {
    temp: 3,
    cost: 241390,
    color: "red",
    target: "E",
    volume: 1.0655003648315398
  },
  {
    temp: 15,
    cost: 277920,
    color: "yellow",
    target: "C",
    volume: 0.700657465435478
  },
  {
    temp: 12,
    cost: 294237,
    color: "green",
    target: "B",
    volume: 5.221829062361729
  },
  {
    temp: 34,
    cost: 363216,
    color: "red",
    target: "A",
    volume: 1.9905418770819305
  },
  {
    temp: -5,
    cost: 347671,
    color: "green",
    target: "B",
    volume: 1.287223272665619
  }
];

const MyResponsiveParallelCoordinates = ({ data /* see data tab */ }) => (
  <ResponsiveParallelCoordinates
    data={data}
    variables={[
      {
        key: "temp",
        type: "linear",
        min: "auto",
        max: "auto",
        ticksPosition: "before",
        legend: "temperature",
        legendPosition: "start",
        legendOffset: 20
      },
      {
        key: "cost",
        type: "linear",
        min: 0,
        max: "auto",
        ticksPosition: "before",
        legend: "cost",
        legendPosition: "start",
        legendOffset: 20
      },
      {
        key: "color",
        type: "point",
        padding: 1,
        values: ["red", "yellow", "green"],
        legend: "color",
        legendPosition: "start",
        legendOffset: -20
      },
      {
        key: "target",
        type: "point",
        padding: 0,
        values: ["A", "B", "C", "D", "E"],
        legend: "target",
        legendPosition: "start",
        legendOffset: -20
      },
      {
        key: "volume",
        type: "linear",
        min: 0,
        max: "auto",
        legend: "volume",
        legendPosition: "start",
        legendOffset: -20
      }
    ]}
    margin={{ top: 50, right: 60, bottom: 50, left: 60 }}
  />
);

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

We add the data array to store the data that we’ll render in our chart.

temp and const are the values.

color have the line colors.

variables have the lines.

key has the property name with the value for the line.

type has the type of line.

min and max have the min and max values. They are calculated automatically if we set them to 'auto' .

ticksPosition sets the tick position.

legend has the legend value.

legendPosition has the position of the legend item.

legendOffset has the legend offset.

margin have the margins.

In App , we render the chart by setting the width and height.

Conclusion

We can add a parallel coordinates 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.

Marimekko Chart

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

To install the required packages, we run:

npm i @nivo/marimekko

Then we can add the chart by writing:

import React from "react";
import { ResponsiveMarimekko } from "@nivo/marimekko";

const data = [
  {
    statement: "it's good",
    participation: 19,
    stronglyAgree: 12,
    agree: 30,
    disagree: 19,
    stronglyDisagree: 31
  },
  {
    statement: "it's sweet",
    participation: 11,
    stronglyAgree: 30,
    agree: 2,
    disagree: 1,
    stronglyDisagree: 16
  },
  {
    statement: "it's spicy",
    participation: 19,
    stronglyAgree: 15,
    agree: 22,
    disagree: 4,
    stronglyDisagree: 18
  }
];

const MyResponsiveMarimekko = ({ data }) => (
  <ResponsiveMarimekko
    data={data}
    id="statement"
    value="participation"
    dimensions={[
      {
        id: "disagree strongly",
        value: "stronglyDisagree"
      },
      {
        id: "disagree",
        value: "disagree"
      },
      {
        id: "agree",
        value: "agree"
      },
      {
        id: "agree strongly",
        value: "stronglyAgree"
      }
    ]}
    innerPadding={9}
    axisTop={null}
    axisRight={{
      orient: "right",
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "",
      legendOffset: 0
    }}
    axisBottom={{
      orient: "bottom",
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "participation",
      legendOffset: 36,
      legendPosition: "middle"
    }}
    axisLeft={{
      orient: "left",
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "opinions",
      legendOffset: -40,
      legendPosition: "middle"
    }}
    margin={{ top: 40, right: 80, bottom: 100, left: 80 }}
    colors={{ scheme: "spectral" }}
    borderWidth={1}
    borderColor={{ from: "color", modifiers: [["darker", 0.2]] }}
    defs={[
      {
        id: "lines",
        type: "patternLines",
        background: "rgba(0, 0, 0, 0)",
        color: "inherit",
        rotation: -45,
        lineWidth: 4,
        spacing: 8
      }
    ]}
    fill={[
      {
        match: {
          id: "agree strongly"
        },
        id: "lines"
      },
      {
        match: {
          id: "disagree strongly"
        },
        id: "lines"
      }
    ]}
    legends={[
      {
        anchor: "bottom",
        direction: "row",
        justify: false,
        translateX: 0,
        translateY: 80,
        itemsSpacing: 0,
        itemWidth: 140,
        itemHeight: 18,
        itemTextColor: "#999",
        itemDirection: "right-to-left",
        itemOpacity: 1,
        symbolSize: 18,
        symbolShape: "square",
        effects: [
          {
            on: "hover",
            style: {
              itemTextColor: "#000"
            }
          }
        ]
      }
    ]}
  />
);

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

We have the data array which has the bar segment values.

The bar segment values are the numeric properties.

In the MyResponsiveMarimekko component, we set the data prop to the data array.

value has the chart title.

dimensions have the property names with the bar segment values as the value of value .

innerPadding has the passing of the chart.

axisRight have the right axis.

We set the tick styles with tickSize , tickPadding , and tickRotation .

axisBottom have the bottom axis styles.

axisLeft have the left axis styles.

We shift the legend text with legendOffset .

margin has the margins.

colors have the colors.

borderColor have the chart border color.

defs has the styles for the background lines.

fill has the fill we want to set for some bar segments.

legends have the legend styles.

itemSpacing , itemWidth , itemHeight , itemTextColor , itemDirection have the item styles.

effects have the animation effect when we hover the legend items.

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

Conclusion

We can add bar charts with custom width bars with the Marimekko component that comes 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.

Line Chart

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

To install the required packages, we run:

npm i @nivo/line

Then we can add the chart by writing:

import React from "react";
import { ResponsiveLine } from "@nivo/line";

const data = [
  {
    id: "japan",
    color: "hsl(70, 70%, 50%)",
    data: [
      {
        x: "plane",
        y: 140
      },
      {
        x: "helicopter",
        y: 80
      },
      {
        x: "boat",
        y: 134
      },
      {
        x: "train",
        y: 202
      },
      {
        x: "subway",
        y: 143
      },
      {
        x: "bus",
        y: 266
      },
      {
        x: "car",
        y: 223
      },
      {
        x: "moto",
        y: 100
      }
    ]
  },
  {
    id: "france",
    color: "hsl(89, 70%, 50%)",
    data: [
      {
        x: "plane",
        y: 267
      },
      {
        x: "helicopter",
        y: 192
      },
      {
        x: "boat",
        y: 259
      },
      {
        x: "train",
        y: 40
      },
      {
        x: "subway",
        y: 34
      },
      {
        x: "bus",
        y: 1
      },
      {
        x: "car",
        y: 100
      },
      {
        x: "moto",
        y: 194
      }
    ]
  }
];

const MyResponsiveLine = ({ data }) => (
  <ResponsiveLine
    data={data}
    margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
    xScale={{ type: "point" }}
    yScale={{
      type: "linear",
      min: "auto",
      max: "auto",
      stacked: true,
      reverse: false
    }}
    yFormat=" >-.2f"
    axisTop={null}
    axisRight={null}
    axisBottom={{
      orient: "bottom",
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "transportation",
      legendOffset: 36,
      legendPosition: "middle"
    }}
    axisLeft={{
      orient: "left",
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "count",
      legendOffset: -40,
      legendPosition: "middle"
    }}
    pointSize={10}
    pointColor={{ theme: "background" }}
    pointBorderWidth={2}
    pointBorderColor={{ from: "serieColor" }}
    pointLabelYOffset={-12}
    useMesh={true}
    legends={[
      {
        anchor: "bottom-right",
        direction: "column",
        justify: false,
        translateX: 100,
        translateY: 0,
        itemsSpacing: 0,
        itemDirection: "left-to-right",
        itemWidth: 80,
        itemHeight: 20,
        itemOpacity: 0.75,
        symbolSize: 12,
        symbolShape: "circle",
        symbolBorderColor: "rgba(0, 0, 0, .5)",
        effects: [
          {
            on: "hover",
            style: {
              itemBackground: "rgba(0, 0, 0, .03)",
              itemOpacity: 1
            }
          }
        ]
      }
    ]}
  />
);

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

We have the data array that we render in our line chart.

It’s set as the value of the data prop.

margin have the margins for the chart.

xScale has the scale for the x-axis.

yScale has the scale for the y-axis.

yFormat has the format for the y-axis values.

axisBottom has the bottom axis.

legend has the axis bottom text.

legendPosition has the position of the legend.

tickSize , tickPadding , tickRotation has the tick spacing and rotation angles.

We have the same settings for axisLeft .

pointSize has the point size for the points.

pointColor have the point color.

pointBorderWidth and pointBorderColor have the point borders.

pointLabelYOffset has the offset of the point label.

useMesh set to true adds the grid to the background.

legends has legends settings. We translate the legend with the translateX and translateY properties.

itemSpacing , itemWidth , itemHeight , and itemOpacity set each item in the settings.

symbolSize and symbolShape has the settings for the symbol to the left of the legend text.

effects has the animation effect when we hover over the legend items.

Conclusion

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