Create a BiAxial Line Chart using Recharts in ReactJS

Last Updated : 22 Nov, 2023

Y-axis Rechart JS is a library Reactused for creating charts for React JS. This library is used for building Line charts, Bar charts, Pie charts, etc, with the help of React and D3 (Data-Driven Documents).

Approach: To create a Biaxial Line chart in React using recharts, we first React and two Y-Axis. Also, add y-axisId to both Y-Axis to the be referenced while plotting the Line chart. Finally, point the line chart around using the Line component from recharts npm package.

BiAxial line chart is a Line chart that has two Y-axis first instead of one. It is used to compare two different series of data points with different Y-Axis.

Steps to Create the React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. folder name, move to it using the following command.

cd foldername

Step 3: After creating the ReactJS application, Install the required modules using the following command.

npm install --save recharts

Project Structure:

The updated dependencies in package.json file will look like.

  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "recharts": "^2.10.1",
    "web-vitals": "^2.1.4",
  }

Example 1: Now write down the following code in the App.js file.

Javascript

import React from 'react';
import {
    LineChart, Line, XAxis,
    YAxis, CartesianGrid
} from 'recharts';
 
const App = () => {
 
    // Sample data
    const data = [
        { x: 1, y: 23, z: 122 },
        { x: 2, y: 3, z: 73 },
        { x: 3, y: 15, z: 32 },
        { x: 4, y: 35, z: 23 },
        { x: 5, y: 45, z: 20 },
        { x: 6, y: 25, z: 29 },
        { x: 7, y: 17, z: 61 },
        { x: 8, y: 32, z: 45 },
        { x: 9, y: 43, z: 93 },
    ];
    return (
        <LineChart width={500}
            height={700} data={data}>
            <CartesianGrid />
            <XAxis dataKey="x" />
            <YAxis yAxisId="left-axis" />
            <YAxis yAxisId="right-axis"
                orientation="right" />
            <Line yAxisId="left-axis"
                type="monotone" dataKey="y"
                stroke="green" />
            <Line yAxisId="right-axis"
                type="monotone" dataKey="z"
                stroke="red" />
        </LineChart>
    );
}
 
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000

Output

Example 2: Now change the following code in the App.js file.

Javascript

import React from 'react';
import {
    LineChart, Line, XAxis,
    YAxis, CartesianGrid
} from 'recharts';
 
const App = () => {
 
    // Sample data
    const data = [
        { x: 1, y: 123, z: 122 },
        { x: 2, y: 113, z: 713 },
        { x: 3, y: 125, z: 312 },
        { x: 4, y: 235, z: 123 },
        { x: 5, y: 145, z: 420 },
        { x: 6, y: 25, z: 529 },
        { x: 7, y: 117, z: 61 },
        { x: 8, y: 32, z: 435 },
        { x: 9, y: 143, z: 93 },
    ];
 
 
    return (
        <LineChart width={500}
            height={700} data={data}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="x" />
            <YAxis yAxisId="left-axis" />
            <YAxis yAxisId="right-axis"
                orientation="right" />
            <Line yAxisId="left-axis"
                type="dashed" dataKey="y"
                stroke="pink" />
            <Line yAxisId="right-axis"
                type="dashed" dataKey="z"
                stroke="blue" />
        </LineChart>
    );
}
 
export default App;