Laravel 9 Dynamic Chart Example Using Chart Js

Hello Artisan,

In this laravel 9 chartjs tutorial, I will discuss how to show data on chartjs from database in Laravel 9. So in this laravel 9 chartjs tutorial, you will learn how to create chart in Laravel 9.

In this tutorial, I am going to show you how to use chartjs in laravel with proper examples. whenever you need to add chart in laravel 9 applications. then you can easily use the following example you have to fetch data from database and then set it in the chart js function,

Today, I will help you to learn how to add charts using chart js in laravel 9. I will explain step by step laravel 9 chart js example. you can simply use Line Charts, Bar Charts, Pie Charts, Area Charts, etc. we will create a line chart with laravel 9.

Chart js is a js library, this library through we can use bar charts, line chart, area chart, column chart etc. Highcharts is an open-source chart library. Chart js also provide several theme and graph that way you can use.




Step 1: Install Laravel 9

This step is optional; however, if you have not created the laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app


Step 2: Create Route:

Now we will create a simple route for creating a simple line chart. so let's add simple routes like below:


use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HighchartController;

Route::get('chart', [HighchartController::class, 'index']);


Step 3: Create Controller:

Here, we will create a new controller as HighchartController. so let's add the below code on that controller file.


namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class HighchartController extends Controller
    public function index()
        $users = User::select(DB::raw("COUNT(*) as count"))
                    ->whereYear('created_at', date('Y'))
        return view('welcome', compact('users'));


Step 4: Create Blade File:

here, we need to create a blade file and in this blade file, we use highchart js and use their code.



Step 5: Create Dummy Records:

For creating dummy records, run the below command

php artisan tinker


Read also: Laravel 9 Dynamic Highcharts Example


Then you will see 30 records are created in your users table. Now you can check it. Hope it will be helpful for you.


Facebook Github
A web enthusiastic, a self-motivated full-stack software engineer from Dhaka, Bangladesh with experience in developing applications using Laravel , React and Vue js