# Laravel 9 Highcharts Example Tutorial

## Laravel 9 Highcharts Example Tutorial

By Hardik Savani March 16, 2022 Category : Laravel![](https://a.vdo.ai/core/assets/img/cross.svg)PauseUnmuteLoaded: 1.00%Fullscreen[![VDO.AI](https://a.vdo.ai/core/assets/img/logo.svg)](https://vdo.ai/?utm_medium=video\&utm_term=itsolutionstuff.com\&utm_source=vdoai_logo)Hi Dev,

This tutorial is focused on laravel 9 highcharts. you'll learn laravel 9 highcharts ajax example. This post will give you a simple example of how to create chart in laravel 9. This post will give you a simple example of how to use highcharts in laravel 9.

you can simply use Line Charts, Bar Charts, Pie Charts, Area Charts, etc using highcharts js.

Highcharts is a js library, this library through we can use bar chart, line chart, area chart, column chart, etc. Highcharts is a open-source chart library. Highcharts also provide several theme and graph that way you can use more chart from here : [HighCharts Site](http://www.highcharts.com/).

In this example, we will create some dummy users records and then we will display a line chart with all months of current years. so let's follow the below step and add a chart in your laravel 9 app.

![](https://www.itsolutionstuff.com/upload/laravel-9-highcharts-js.png)

**Step 1: Install Laravel 9**

This 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**

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

routes/web.php

```
<?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('chart', [HighchartController::class, 'index']);
```

Read Also: [Laravel 9 REST API with Passport Authentication Tutorial](https://www.itsolutionstuff.com/post/laravel-9-rest-api-with-passport-authentication-tutorialexample.html)

**Step 3: Create Controller**

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

app/Http/Controllers/HighchartController.php

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

resources/views/chart.blade.php

```
<!DOCTYPE html><html><head>    <title>Laravel 9 Highcharts Example - ItSolutionStuff.com</title></head>   <body><h1>Laravel 9 Highcharts Example - ItSolutionStuff.com</h1><div id="container"></div></body>  <script src="https://code.highcharts.com/highcharts.js"></script><script type="text/javascript">    var users =  {{ Js::from($users) }};       Highcharts.chart('container', {        title: {            text: 'New User Growth, 2022'        },        subtitle: {            text: 'Source: itsolutionstuff.com.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>
```

**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 tinkerUser::factory()->count(30)->create()
```

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

![](https://www.itsolutionstuff.com/upload/laravel-9-highcharts-js-2.png)

**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:

Read Also: [Laravel 9 Summernote Editor with Image Upload](https://www.itsolutionstuff.com/post/laravel-9-summernote-editor-with-image-uploadexample.html)

```
http://localhost:8000/chart
```

Output:

![](https://www.itsolutionstuff.com/upload/laravel-9-highcharts-js-3.png)

I hope it can help you...
