This content originally appeared on DEV Community and was authored by NasreenKhalid
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...
This content originally appeared on DEV Community and was authored by NasreenKhalid
NasreenKhalid | Sciencx (2021-07-25T11:13:21+00:00) React Chart js Line Graph App. Retrieved from https://www.scien.cx/2021/07/25/react-chart-js-line-graph-app/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.