AppDividend
Latest Code Tutorials

How to Create Charts in Reactjs

2,019

Get real time updates directly on you device, subscribe now.

How to Create Charts in Reactjs is the topic, we will cover today. In this tutorial, we will use Chart.js library to display the chartsWe will discuss two charts in this tutorial. First is the BarChart, uses bars to show comparisons between categories of data. Second is the PieChart, generally used to indicate percentage or proportional data. We will use Laravel as a backend to serve the data. I will use Axios library to send an AJAX request to the Laravel API. Axios is a promise based javascript library.

How to Create Charts in Reactjs

First, we install the React.js skeleton project.

Step 1: Install React js Project

Open your terminal and type following command.

npx create-react-app reactjscharttutorial

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

yarn start

Step 2: Add Chartjs Library

Now, we can add the chartjs library in react js by typing following command.

yarn add react-chartjs-2 chart.js

Step 3: Define a React Component to create Chart

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

//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 the 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>
      )
   }
}

Next, we can add components in 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 5.6

Install Laravel by typing following command.

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

Step 5: Configure the database.

Add 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 model and migration files.

php artisan make:model Chart -m

It will create 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 into 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

Leave A Reply

Your email address will not be published.

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