React Chart js Line Graph App

There are many applications where you have a particular set of data and you need to plot the values on a graph, be it a bar chart, a line graph, a doughnut or a pie chart, in any form the values plotted on a graph are far more readable and understandable then explained in the form of text.

You can read more information about react chartjs here

Today, we will create a simple Line Graph application in react using chartjs library and plot the weekly results of our daily calories lost.

To begin with, I have created a react application using the command: npx create_react_app my_react_app
Next, we will do the necessary clean up which includes removing the logo.svg and tests file from the src folder of our app.
Now, we need to install two dependencies in order to make use of chartjs in react by running the following command:

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

or

yarn add react-chartjs-2 chart.js

After the dependencies are installed, now we will create a LineGraph.js file in src folder where we will write the code for our graph. In this file, we will need to import the Line graph from react chartjs in the following manner:

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

Next we will define the x and y axis values in the Line component as follows:

<Line
       data={{
       // x-axis label values
       labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday","Sunday"],
       datasets: [
          {
              label: "# of Calories Lost",
              // y-axis data plotting values
              data: [200, 300, 1300, 520, 2000, 350,150],
              fill: false,
              borderWidth:4,
              backgroundColor: "rgb(255, 99, 132)",
              borderColor:'green',
              responsive:true
            },
          ],
        }}
      />

Below is the description of all the values corresponding in the data object:

• labels: values on x-axis
• data: array to be plotted over y-axis
• fill:false -- if you want your graph to be filled underneath the plotted points then you will set fill to true
• borderColor: color of the line which is plotted on the graph
• borderWidth: width of the line graph

Complete look of LineGraph.js file is like this:

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

function LineGraph() {
  return (
    <div>
      <Line
        data={{
          // x-axis label values
          labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday","Sunday"],
          datasets: [
            {
              label: "# of Calories Lost",
              // y-axis data plotting values
              data: [200, 300, 1300, 520, 2000, 350,150],
              fill: false,
              borderWidth:4,
              backgroundColor: "rgb(255, 99, 132)",
              borderColor:'green',
              responsive:true
            },
          ],
        }}
      />
    </div>
  );
}

export default LineGraph;

Run this app using npm start and you will find a beautiful responsive line graph plotted across x and y axis.

This is a very simple implementation of chartjs, however it can be used for various purposes wherever you are making use of a variety of data values.

That's all folks.
Happy coding...