Laravel 11 ChartJS Line Chart Example

Websolutionstuff | May-10-2024 | Categories : Laravel jQuery

Hello developer! In this article, we'll see how to create a dynamic line chart in laravel 11 using chart js. You can easily create a line chart using ChartJS jQuery. Chart.js is a free, open-source JavaScript library for data visualization, which supports eight chart types: bar, line, area, pie, bubble, radar, polar, and scatter.

ChartJS is a Simple yet flexible JavaScript charting library for the modern web. Also, you can use with npm and CDN.

Laravel 11 ChartJS Line Chart

Laravel 11 ChartJS Line Chart


Step 1: Install Laravel 11 Application

In this step, we'll install the laravel 11 application using the following command.

composer create-project laravel/laravel laravel-11-chart-example


Step 2: Define a Route

Now, we'll define routes into the web.php file


use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ChartJSController;
Route::get('chart', [ChartJSController::class, 'index']);
Step 3: Create a Controller

Next, we'll create a ChartJSController.php using the following command and define the function.


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

Then, we'll create a blade file and also use chartjs line chart.


<!DOCTYPE html>
    <title>Laravel 11 ChartJS Line Chart Example - Techsolutionstuff</title>
    <link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <div class="container">
        <div class="card mt-5">
            <h3 class="card-header p-3">Laravel 11 ChartJS Chart Example -</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

Next, we'll create dummy records for testing purposes using the tinker.

php artisan tinker



Step 6: Run the Laravel 11 Application

Now, run the laravel 11 application using the following command.

php artisan serve


Laravel 11 ChartJS Line Chart


You might also like:

Recommended Post
Featured Post
How To Get env Variable In Controller Or Blade File
How To Get env Variable In Con...

In this tutorial, I will give you information on how to get the .env variable in the controller or file. Many times we n...

Read More


How To Get Data Between Two Dates In Laravel 9
How To Get Data Between Two Da...

In this article, we will see how to get data between two dates in laravel 9. Here we will learn how to count d...

Read More


How to Integrate Razorpay Payment Gateway in Laravel
How to Integrate Razorpay Paym...

In this article, we will see the most important and exciting toping about how to integrate razorpay payment gateway in l...

Read More


How To Get Last 30 Days Record In Laravel 8
How To Get Last 30 Days Record...

in this tutorial, we see how to get last 30 days record in laravel 8. You can simply get the last 30 days reco...

Read More