ChartJS in React

Mathesh — Fri, 31 Mar 2023 05:55:57 +0000

We’ll talk about how to integrate the chartJS library with React in this section. You can build a variety of charts to utilize in your applications. It is a simple lesson that only covers the fundamentals of ChartJS. We’ll talk about bar charts, line charts, and pie charts in this blog.

We will first develop the fundamental React app using the file structure mentioned above. The required packages will then be installed. The packages will be installed by us using

npm add chart.js react-chartjs-2

after that for demonstrating purposes here we create the Data.js

export const UserData = [
  {
    id: 1,
    year: 2010,
    userGain: 80000,
    userLost: 823,
  },
  {
    id: 2,
    year: 2011,
    userGain: 45677,
    userLost: 345,
  },
  {
    id: 3,
    year: 2012,
    userGain: 78888,
    userLost: 555,
  },
  {
    id: 4,
    year: 2013,
    userGain: 90000,
    userLost: 4555,
  },
  {
    id: 5,
    year: 2014,
    userGain: 4300,
    userLost: 234,
  },
  {
    id: 6,
    year: 2015,
    userGain: 90000,
    userLost: 4555,
  },
  {
    id: 7,
    year: 2016,
    userGain: 78888,
    userLost: 555,
  },
];

The user increase over time is displayed through this Data.js. After that, we’ll build the BarChart.js (under the components -> BarChart.js) file.

import React from "react";
import { Bar } from "react-chartjs-2";
import { Chart as ChartJS } from "chart.js/auto";

function BarChart({ chartData }) {
  return <Bar data={chartData} />;
}

export default BarChart;

in BarChart.js we sent the user data through props. In the Home.js

import BarChart from "../components/BarChart";
import { UserData } from "../Data/Data";
import { useState } from "react";

const Home = () => {
  const [userData, setUserData] = useState({
    labels: UserData.map((data) => data.year),
    datasets: [
      {
        label: "Users Gained",
        data: UserData.map((data) => data.userGain),
        backgroundColor: [
          "rgba(75,192,192,1)",
          "#ecf0f1",
          "#50AF95",
          "#f3ba2f",
          "#2a71d0",
          "#2a71d0",
          "#2a71d0",
        ],
        borderColor: "black",
        borderWidth: 2,
      },
    ],
  });

  return (
    <div>
      <h1>Charts</h1>
      <div style={{ width: 600 }}>
        <BarChart chartData={userData} />
      </div>
    </div>
  );
};
export default Home;

We use the useState hook to convey data through Props. There are various possibilities for a bar chart, line chart, and pie chart right here in the useState. But in this case, we provide the year for the bar chart label.

they are for the bar chart. Next, we switch to the Line chart, for which we develop LineChart.js.

import React from "react";
import { Line } from "react-chartjs-2";
import { Chart as ChartJS } from "chart.js/auto";

function LineChart({ chartData }) {
  return <Line data={chartData} />;
}

export default LineChart;

Similar to a bar chart, but with the importation of a line rather than a bar component. We also sent props through here. The code for PieChart.js is available here as we finally move on to the pie chart.

import React from "react";
import { Pie } from "react-chartjs-2";
import { Chart as ChartJS } from "chart.js/auto";

function PieChart({ chartData }) {
  return <Pie data={chartData} />;
}

export default PieChart;

Similar to bar and line charts, we import the pie component in this instance.

These are some fundamental steps for utilizing the chartJS library, which you can adapt in various other ways. I hope you learn something from this.

Source code:- https://github.com/matheshyogeswaran/chart.git

DEV Community: Mathesh

ChartJS in React