Creating Dynamic Charts with ChartJS in Laravel 11




Creating Dynamic Charts with ChartJS in Laravel 11

Hi, Dev

In this tutorial, I'll guide you through the process of crafting a line chart using Chart.js within a Laravel 11 application. Chart.js offers a versatile range of chart types including Line Charts, Bar Charts, Pie Charts, Area Charts, and more, enabling us to visualize data effectively. Let's delve into creating a line chart specifically using Chart.js in Laravel 11.

Chart.js is a JavaScript library. This library can be used to create bar charts, line charts, area charts, column charts, etc. Chart.js is an open-source chart library. It also provides several themes and graphs, allowing you to utilize more charts from here: Chart.js Site.

In this demonstration, we'll generate fictitious user data and subsequently showcase a line chart spanning all months of the current year. Follow along with the steps outlined below to seamlessly integrate a chart into your Laravel 11 application.

Step for How to Create Graph using ChartJS in Laravel 11?

Step 1:Install Laravel 11

Step 2:Create Route

Step 3:Create Controller

Step 4:Create Blade File

Step 5:Create Dummy Records

Run Laravel App

Step 1: Install Laravel 11

This step is not required; 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

First of all, we will create a simple route for creating a simple line chart. So, let's add simple routes as below:



use Illuminate\Support\Facades\Route;

use App\Http\Controllers\ChartJSController;

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

Step 3: Create Controller

Here, we will create a new controller called ChartJSController. So let's add the code below to that controller file.



namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Illuminate\View\View;

use App\Models\User;

use DB;

class ChartJSController extends Controller



* Write code on Method


* @return View


public function index(): View


$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 need to create a Blade file, and in this Blade file, we use Highcharts.js and incorporate their code.


<!DOCTYPE html>



<title>Creating Dynamic Charts with ChartJS in Laravel 11 -</title>

<link href="" rel="stylesheet" crossorigin="anonymous">



<div class="container">

<div class="card mt-5">

<h3 class="card-header p-3">Creating Dynamic Charts with ChartJS in Laravel 11 -</h3>

<div class="card-body">

<canvas id="myChart" height="120px"></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(






Step 5: Create Dummy Records

Here, we need to add some dummy records on users table as monthly wise.

you can create dummy records using laravel tinker command as bellow:

php artisan tinker


You need to create users on each month with created date as like bellow screen shot:


Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:



I hope it can help you...

#Laravel 11