DEV Community

Mathesh
Mathesh

Posted on

ChartJS in React

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.

Basic File Structure
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 
Enter fullscreen mode Exit fullscreen mode

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,
  },
];
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

View of the example
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

Latest comments (0)