Laravel 9 ChartJS Chart Example Tutorial

Today now in this post , I will show you an example of how to work laravel 9 chartjs . So here I will explained this very simply about the dynamic chartjs charts in laravel 9 application. Now this article is goes in details about how to use chartjs in laravel 9 application. Do you have any question about the how to add chartjs in laravel 9 application then here I will give a very simple example also with a solution. Alright, let’s start and follow the steps.

We can simply use the Line Charts, Bar Charts, Pie Charts, Area Charts, etc by using the chartjs library js.

Now in this example, i will create a line chart with all months of current years. so let’s start and follow the below step and then add a chart in your own laravel 9 application.

Step 1: Install Laravel 9

This is first step but this step is optional; however, if you do not have then need to created the laravel app. then you may go ahead and then execute the below command:

composer create-project laravel/laravel example-app

Step 2: Create Route

Then at first of all i will create the simple route for creating the simple line chart. So let’s need to add simple routes as like as bellow:


use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ChartJSController;
| Web Routes
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
Route::get('chart', [ChartJSController::class, 'index']);

Step 3: Create Controller

Here, i will create a new controller as ChartJSController. so let’s add the bellow code on that controller file.


namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use DB;
class ChartJSController extends Controller
     * Write code on Method
     * @return response()
    public function index()
        $users = User::select(DB::raw("COUNT(*) as count"), DB::raw("MONTHNAME(created_at) as month_name"))
                    ->whereYear('created_at', date('Y'))
                    ->pluck('count', 'month_name');
        $labels = $users->keys();
        $data = $users->values();
        return view('chart', compact('labels', 'data'));

Step 4: Create Blade File:

Here, we have to create the blade file and in this blade file i will use highchart js and use their code.


<!DOCTYPE html>
    <title>Laravel 9 ChartJS Chart Example -</title>
    <h1>Laravel 9 ChartJS Chart Example -</h1>
    <canvas id="myChart" height="100px"></canvas>
<script src="" ></script>
<script src=""></script>
<script type="text/javascript">
      var labels =  {{ Js::from($labels) }};
      var users =  {{ Js::from($data) }};
      const data = {
        labels: labels,
        datasets: [{
          label: 'My First dataset',
          backgroundColor: 'rgb(255, 99, 132)',
          borderColor: 'rgb(255, 99, 132)',
          data: users,
      const config = {
        type: 'line',
        data: data,
        options: {}
      const myChart = new Chart(

Run Laravel App:

That’s good all the required steps have been complete, now we have to type the given below command and hit the enter to run the Laravel app:

php artisan serve

Read Also: How To Implement Laravel 9 form validation ?

Thanks for read. I hope it help you. For more you can follow us on facebook


About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →