Laravel 9 Dynamic Highcharts Example

Hello Artisan,

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

In this tutorial, I am going to show you how to use Highcharts in larave with proper example.whenever you need to add charts in laravel 9server side. then you can easily use the following example you have to fetch data from database and then set it in the Highcharts function,

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

Highcharts 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. Highcharts also provide several theme and graph that way you can use more chart from here: HighCharts.

Preview

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:

routes/web.php

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.

app/Http/Controllers/HighchartController.php

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'))
                    ->groupBy(DB::raw("Month(created_at)"))
                    ->pluck('count');
            
        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.

resources/views/welcome.blade.php

Step 5: Create Dummy Records:

For creating dummy records, run the below command

php artisan tinker
User::factory()->count(30)->create()

Read also: Dynamic Pie Charts Example Using Google Charts API in Laravel

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