Laravel 11 Highcharts Example Tutorial

Laravel 11 Highchart example; Through this tutorial, i am going to show you how to implement a highchart in Laravel 11 app using highchart js.

Laravel 11 Highcharts Example Tutorial

Follow the below steps to implement highcharts in Laravel 11 application.

Step 1: Create web routes
Step 2: Create Controller
Step 3: Create Blade File
Step 4: Run Development Server

Step 1: Create web routes

The first step, create routes for highchart. So go to routes/web.php and update the below route in your file:

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\HighChartController;

/*
|--------------------------------------------------------------------------
| 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('highchart', [HighChartController::class, 'index']);

Step 2: Create Controller

In this step, execute the following command on terminal to create a new controller name HighChartController.php:

php artisan make:controller HighChartController

After that, add the following code into HighChartController.php, which is located on app/Http/Controller directory:

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\User;
  
class HighChartController extends Controller
{
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    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('highchart', compact('users'));
    }
}

Step 3: Create Blade File

In this step, create a blade view file name highchart.blade.php. So go to the resources/views/ and update the below javascript and HTML code for displaying the highchart:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Highcharts Example - Laratutorials.com</title>
</head>
   
<body>
<h1>Laravel 11 Highcharts Example - Laratutorials.com</h1>
<div id="container"></div>
</body>
  
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
    var users =  <?php echo json_encode($users) ?>;
   
    Highcharts.chart('container', {
        title: {
            text: 'New User Growth, 2022'
        },
        subtitle: {
            text: 'Source: Laratutorials.com'
        },
         xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Number of New Users'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                allowPointSelect: true
            }
        },
        series: [{
            name: 'New Users',
            data: users
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
});
</script>
</html>

Note: Don’t forget to include the highchart js libraries on your blade view file and you can add or remove this library according to your requirement.

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

Or also don’t forget to add this javascript code. The highchart library also provides so many options for the highchart. You can change or modify according to your requirement:

<script type="text/javascript">
   let chart =  JSON.parse(`<?php echo $chart ?>`);
   
    Highcharts.chart('container', {
        title: {
            text: 'New User Growth, 2022'
        },
        subtitle: {
            text: 'Source: laratutorials.com'
        },
         xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Number of New Users'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                allowPointSelect: true
            }
        },
        series: [{
            name: 'New Users',
            data: chart
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
});
</script>

Step 4: Run Development Server

Open terminal and execute the following command to start development server:

php artisan serve

Then open browser and fire the below given url on it:

http://127.0.0.1:8000/highchart

Laravel 11 Highcharts Example Tutorial