ItSolutionStuff.com

How to Add Charts in Laravel using Highcharts?

By Hardik Savani • November 5, 2023
Laravel Highcharts

Hey Folks,

I am going to explain to you example of how to use highcharts in laravel. you can understand a concept of how to add highcharts in laravel. we will help you to give an example of laravel add highcharts. I would like to share with you laravel highcharts data example. follow the below example for laravel highcharts example tutorial.

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.

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

Step 1: Install Laravel

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']);

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 Highcharts Example - ItSolutionStuff.com</title>

</head>

<body>

<h1>Laravel 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 tinker

User::factory()->count(30)->create()

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

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:

http://localhost:8000/chart

Output:

I hope it can help you...

Tags: Laravel
Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Laravel Mail Send with PDF Attachment Example

Read Now →

How to set CC And BCC Email Address In Laravel Mail?

Read Now →

Laravel Google Pie Chart Example Tutorial

Read Now →

Laravel Google Bar Chart Example Tutorial

Read Now →

Laravel 9 Google Charts Tutorial Example

Read Now →

How to Change From Name in Laravel Mail?

Read Now →

How to Send Mail using Sendinblue in Laravel?

Read Now →

Laravel Google Chart Example Tutorial

Read Now →

Laravel Ajax ConsoleTvs Charts Tutorial

Read Now →

Laravel Line Chart using Google Charts API Example

Read Now →

Laravel GEO Chart using Lavacharts Example

Read Now →

Laravel Mailchimp API Integration Example

Read Now →

Laravel Chartjs Chart Example Tutorial

Read Now →