How to Use Chart.js to Create Charts in React

The React wrapper for chart.js is react-chartjs-2, which simplifies things in React. However, it doesn’t support all the customization features of Chart.js.

Here are the steps to create charts in React.

Step 1: Install React Project

npx create-react-app reactjscharttutorial

Move to the project folder by cd command and start the development server by typing the following code.

yarn start

Step 2: Add Chart.js Library

Add the chartjs library to react js by typing the following command.

yarn add react-chartjs-2 chart.js

Step 3: Define a React Component to create a Chart

Go to the src  >> components folder and create a new file called BarChartComponent.js.

// BarChartComponent.js
import React, { Component } from 'react';
import {Bar} from 'react-chartjs-2';


export default class BarChartComponent extends Component
{
   constructor(props) {
      super(props);
      this.state ={
       }
  }
   render()
   {
      return(
         <div>
            <Bar/>
         </div>
      )
   }
}

Go to the src  >> components folder and create a new file called PieChartComponent.js. This file is created for PieChart.

// PieChartComponent.js
import React, { Component } from 'react';
import {Pie} from 'react-chartjs-2';


export default class PieChartComponent extends Component
{
   constructor(props) {
      super(props);
      this.state ={
       }
  }
   render()
   {
      return(
         <div>
            <Pie/>
         </div>
      )
   }
}

Add components in the App.js file.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import BarChartComponent from './components/BarChartComponent';
import PieChartComponent from './components/PieChartComponent';

class App extends Component {
  render() {
    return (
      <div className="App">
      <h1>BarChart</h1>
        <BarChartComponent/>
      <h1>PieChart</h1>
        <PieChartComponent/>
      </div>
    );
  }
}

export default App;

Step 4: Install Laravel

Install Laravel by typing the following command.

composer create-project --prefer-dist laravel/laravel LaravelReactJSChart

Step 5: Configure the database.

Add the database credentials in the .env file

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravelreactchart
DB_USERNAME=root
DB_PASSWORD=

Step 6: Create a model and migration files.

php artisan make:model Chart -m 

It will create a model and migration file.

Step 7: Define the schema in the migration file.

Go to the create_charts_table.php file and add the schema to it.

public function up()
    {
        Schema::create('charts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->integer('score');
            $table->timestamps();
        });
    }

Step 8: Define the routes in the api.php file.

We can create a controller called ChartController.php.

php artisan make:controller ChartController --resource

1 thought on “How to Use Chart.js to Create Charts in React”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.