How to Implement and use Highcharts in Laravel 9?

Mar 16, 2022 . Admin

Hi dev,

Today, I am explain how to implement and use highcharts in laravel 9. In this article i will show you create highchart in laravel 9. We will learn how to add highchart create in laravel 9. This tutorial demonstrates how to create charts in Laravel 9 with Highcharts. you will learn how to implement a highcharts in laravel 9 using highchart js.using highcharts you can create interactive charts easily for your web projects. i am going to show you how to implement a highchart in laravel 9 app using highchart js.

Highcharts is a modern SVG-based, multi-platform charting library. It makes it easy to add interactive charts to web and mobile projects.

If you work with any web application or e-commerce application or any dating application etc, And need to show analytics on these application dashboards. So this laravel 9 highcharts example tutorial helps you, how to fetch month wise data and how to display month wise data in highcharts for analytics on laravel application.

Step 1: Download Laravel

Let us begin the tutorial by installing a new laravel application. if you have already created the project, then skip following step.

composer create-project laravel/laravel example-app
Step 2: Create Route

first of all we will create simple route for creating simple line chart. so let's add simple routes as like bellow:

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('chart', [HighchartController::class, 'index']);
Step 3: Create Controller

Here, we will create new controller as HighchartController. so let's add bellow code on that controller file.

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use DB;
class HighchartController extends Controller
     * Write code on Method
     * @return response()
    public function index()
        $users = User::select(DB::raw("COUNT(*) as count"))
                    ->whereYear('created_at', date('Y'))
        return view('chart', compact('users'));
Step 4: Create Blade File:

here, we need to create blade file and in this blade file we use highchart js and use their code.

<!DOCTYPE html>
    <title>How to Implement and Use Highcharts in Laravel 9? -</title>
    <link href="" rel="stylesheet">
<div class="col-md-12 text-center my-4">
    <h2>How to Implement and Use Highcharts in Laravel 9? -</h2>
<div id="container"></div>
<script src=""></script>
<script type="text/javascript">
    var users =  {{ Js::from($users) }};
    Highcharts.chart('container', {
        title: {
            text: 'New User Growth, 2022'
        subtitle: {
            text: 'Source:'
         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'
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 steps have been done, now you have to type the given command and hit enter to run the laravel app:

php artisan serve

Now, you have to open web browser, type the given URL and view the app output:


I hope it can help you...

#Laravel 9