# 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...


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learnphp.gitbook.io/learnphp/learn-lavarel/laravel-9-highcharts-example-tutorial.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
