Create Different Charts In React Using Chart.js Library

"A little progress each day adds up to big results." - Satya Nani

Overview

In this article, we will learn about how to use chart.js in react with simple examples using static data.

What is Chart.Js?

• Chart.js is one of the most popular JavaScript chart library.
• It provides everything you need to create a chart from basic line and bar chart to advanced chart like radar chart or non-linear scale chart etc.
• It also provides customizations for colors, styles and tooltips of the chart.
• The charts provided by Chart.js are fully responsive so you don't need to worry about it.

Installation

Currently, chart.js version 2 is the latest version, and it works seamlessly with react.

Install react-chartjs-2 package by running npm command given below:

npm install react-chartjs-2 chart.js --save

Examples

Let’s look at some examples of Line graph, Bar Charts and Pie Chart.

1. Line Chart

A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets. Let’s see one example.

This is our App.js file. In this case, it is the parent component of our Chart component that is used to display the charts.

import React, { Component } from "react";
import { Chart } from "./components";

class App extends Component {
  render() {
    return <Chart />;
  }
}
export default App;

This is our Chart.jsx component used to represent our data using line chart.

import React from "react";
import { Line } from "react-chartjs-2";

const Chart = () => {
  const lineChartData = {
    labels: ["October", "November", "December"],
    datasets: [
      {
        data: [8137119, 9431691, 10266674],
        label: "Infected",
        borderColor: "#3333ff",
        fill: true,
        lineTension: 0.5
      },
      {
        data: [1216410, 1371390, 1477380],
        label: "Deaths",
        borderColor: "#ff3333",
        backgroundColor: "rgba(255, 0, 0, 0.5)",
        fill: true,
        lineTension: 0.5
      }
    ]
  };

  return (
    <Line
      type="line"
      width={160}
      height={60}
      options={{
        title: {
          display: true,
          text: "COVID-19 Cases of Last 6 Months",
          fontSize: 20
        },
        legend: {
          display: true, //Is the legend shown?
          position: "top" //Position of the legend.
        }
      }}
      data={lineChartData}
    />
  );
};
export default Chart;

Explanation

The lineChartData is the variable that contains all the data and styling properties of the line graph. It is an object with multiple properties used that would be required to display our data in the form of chart.

The labels property in lineChartData variable is an array that is used to assign the names to each bar, and the datasets property is also an array that contains sub-set of information such as bar colour, border, width and height of the bar. The lineTension property in every set of object of datasets is used to control the curvature of the line joining the points.

The chart legend property of the Line element is used to display the data about the datasets that are appearing on the chart.

Output

2. Bar Chart

A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.

The syntax is almost similar to the one used for a line chart. One property lineTension is not used here. Let’s understand more through example.

This is our Chart.jsx component used for representing data in form of bar chart.

import React from "react";
import { Bar } from "react-chartjs-2";

const Chart = () => {
  const barChartData = {
    labels: ["October", "November", "December"],
    datasets: [
      {
        data: [8137119, 9431691, 10266674],
        label: "Infected People",
        borderColor: "#3333ff",
        backgroundColor: "rgba(0, 0, 255, 0.5)",
        fill: true
      },
      {
        data: [1216410, 1371390, 1477380],
        label: "Deaths People",
        borderColor: "#ff3333",
        backgroundColor: "rgba(255, 0, 0, 0.5)",
        fill: true
      }
    ]
  };

  const barChart = (
    <Bar
      type="bar"
      width={130}
      height={50}
      options={{
        title: {
          display: true,
          text: "COVID-19 Cases of Last 3 Months",
          fontSize: 15
        },
        legend: {
          display: true, //Is the legend shown?
          position: "top" //Position of the legend.
        }
      }}
      data={barChartData}
    />
  );
  return barChart;
};

export default Chart;

Output

3. Pie Chart

Pie chart is probably the most commonly used chart. It is divided into segments, the arc of each segment shows the proportional value of each piece of data. It is excellent at showing the relational proportions between data.

Let’s understand more through one example.

This is our Chart.jsx component for representing our data in the form pie chart.

import React from "react";
import { Pie } from "react-chartjs-2";

const Chart = () => {
  const pieChartData = {
    labels: ["October", "November", "December"],
    datasets: [{
        data: [8137119, 9431691, 10266674],
        label: "Infected People",
        backgroundColor: ["#2FDE00", "#00A6B4", "#ff6600"],
        hoverBackgroundColor: ["#175000", "#003350", "#993d00"]
    }]
  };
  const pieChart = (
    <Pie
      type="pie"
      width={130}
      height={50}
      options={{
        title: {
          display: true,
          text: "COVID-19 Cases of Last 3 Months",
          fontSize: 15
        },
        legend: {
          display: true, //Is the legend shown?
          position: "top" //Position of the legend.
        }
      }}
      data={pieChartData}
    />
  );
  return pieChart;
};
export default Chart;

Output

Summary

In this article, I discussed how to create different charts like Line chart, Bar chart, Pie chart using Chart.js NPM library with examples. Also, discussed overview of Chart.js library.

More types of supported graphs and charts, along with the details about their properties, can be found on Chart.js’s github