How to Create a Simple Line Chart using React Recharts Library

In this short tutorial, we will show you how to build a simple line chart in React js using the Recharts and Bootstrap libraries.

Recharts is a popular open-source charting library for React applications. It offers a hassle-free customization option that helps you build interactive charts, including line charts, area charts, bar charts, pie charts, scatter charts, and more.

Recharts is a Redefined chart library exclusively developed with React and D3.

The primary reason for the existence of this library is to help you build intuitive yet profound charts in React applications without any pain.

Recharts are created on top of the D3.js library and use a declarative API, resulting in designing complex charts with minimal code.

On top of that, Recharts in React supports real-time animations and updates, qualifying you to build dynamic and engaging data visualizations through charts and graphs.

React Js Recharts Simple Line Chart Example

• Step 1: Install React App
• Step 2: Install Recharts Package
• Step 3: Create Simple Chart File
• Step 4: Implement Line Chart in React
• Step 5: Register Chart Component
• Step 6: Test App on Browser

Install React App

We are using the CRA tool to install the new copy of React framework. You must type the suggested command on the CLI tool and press enter.

npx create-react-app my-react-app

After the app is downloaded, change the project name if you don’t want to keep the given name.

Use the command to head over to the app folder.

cd my-react-app

Install Recharts Package

In this step, we will install the recharts package and the bootstrap library.

If you don’t want to use the bootstrap Ui framework, then no problem; remove the bootstrap command from the terminal and then hit enter.

npm i recharts bootstrap

NPM is the easiest and fastest way to get started using Recharts.

On the other hand, It is considered the best installation method when building single-page applications (SPAs).

Create Line Chart Component

Now, we will make line graph, therefore make the components/ directory, also don’t forget to create the ReLineChart.js file.

In this file, you have to import the Recharts modules at the top section of the function component.

import React from 'react'
import { LineChart, Line, XAxis, CartesianGrid, Tooltip } from "recharts";
function ReLineChart() {
  return (
    <div>
      
    </div>
  )
}
export default ReLineChart

Implement Simple Line Chart in React

To integrate the ReLine chart in React, you have to first import the LineChart, Line, XAxis, CartesianGrid, and Tooltip services from the “recharts” package.

Make sure to pass the width, height, data, and other rechart props to the LineChart component.

You need to insert the below code in the components/ReLineChart.js file.

import React from "react";
import { LineChart, Line, XAxis, CartesianGrid, Tooltip } from "recharts";
const data = [
  {
    name: "Page A",
    uv: 4000,
    pv: 2400,
    amt: 2400,
  },
  {
    name: "Page B",
    uv: 3000,
    pv: 1398,
    amt: 2210,
  },
  {
    name: "Page C",
    uv: 2000,
    pv: 9800,
    amt: 2290,
  },
  {
    name: "Page D",
    uv: 2780,
    pv: 3908,
    amt: 2000,
  },
  {
    name: "Page E",
    uv: 1890,
    pv: 4800,
    amt: 2181,
  },
  {
    name: "Page F",
    uv: 2390,
    pv: 3800,
    amt: 2500,
  },
  {
    name: "Page G",
    uv: 3490,
    pv: 4300,
    amt: 2100,
  },
];
function ReLineChart() {
  return (
    <div>
      <LineChart
        width={400}
        height={400}
        data={data}
        margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
      >
        <XAxis dataKey="name" />
        <Tooltip />
        <CartesianGrid stroke="#f5f5f5" />
        <Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId={0} />
        <Line type="monotone" dataKey="pv" stroke="#387908" yAxisId={1} />
      </LineChart>
    </div>
  );
}
export default ReLineChart;

Register Chart Component

To register a component in React, you generally define the component in an src/App.js file; this way, you can use any component in React realm.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ReLineChart from "./components/ReLineChart";
function App() {
  return (
    <div className="container mt-5">
      <h2 className="mb-4">React Js Rechart Simple Line Chart Example</h2>
      <ReLineChart />
    </div>
  );
}
export default App;

Test App on Browser

We have almost finished the component development process.

Now, we need to run the react server; using the below command easiest provides the fastest and easiest way to run the server.

npm start

Once the server is up and running, it will serve the app on the given url:

http://localhost:3000

Summary

In this step by step guide, we have shown you practical example of how to comfortably build a simple line chart in React js. To create the line chart component we took the help of Recharts library.