Laravel 8 Highcharts Example Tutorial

Laravel , Laravel 8




Laravel 8 Highcharts Example Tutorial

Now let's see example of how to implement highchart in laravel 8 application. In this article i will show you highchart in laravel 8. We will learn how to add highchart in laravel 8. let's discuss about how to use highchart in laravel 8.

Here i will give you simple and easy way to use highchart in laravel 8. In this example i am going to show month in total user count with highchart in laravel 8.

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 sevral theme and graph that way you can use more chart from here : HighCharts Site

Now let's see bellow example for how to use highchart in laravel 8. So let's follow bellow step by step:

Step 1: Install Laravel Project

First, you need to download the laravel fresh setup. Use this command then download laravel project setup :

composer create-project --prefer-dist laravel/laravel blog

Step 2: Setup Database

After successfully install laravel 8 Application, Go to your project .env file and set up database credential and move next step :




DB_DATABASE=here your database name

DB_USERNAME=here database username

DB_PASSWORD=here database password

Step 3 : Add Route

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


use App\Http\Controllers\HighChartController;

Route::get('high-chart', [HighChartController::class, 'index']);

Step 4 : Create Controller

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



namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\User;

class HighChartController extends Controller


public function index()


$users = User::select(\DB::raw("COUNT(*) as count"))

->whereYear('created_at', date('Y'))



return view('highChart', compact('users'));



Step 5 : Create View file

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


<!DOCTYPE html>



<title>Laravel 8 Highcharts Example -</title>

<link rel="stylesheet" href="" integrity="sha512-MoRNloxbStBcD8z3M/2BmnT+rg4IsMxPkXaGh2zD6LGNNFE80W3onsAhRcMAMrSoyWL9xD7Ert0men7vR8LUZg==" crossorigin="anonymous" />



<div class="container mt-5">

<h2 class="text-center"><strong>Laravel 8 Highcharts Example -</strong></h2>

<div id="hight-chart"></div>



<script src=""></script>

<script type="text/javascript">

var users = <?php echo json_encode($users) ?>;

Highcharts.chart('hight-chart', {

title: {

text: 'New User Growth, 2019'


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 6 : Create Dummy Records:

Here, we need to add some dummy records on users table as monthly wise. You need to create users on each month with created date as like bellow screen shot

Step : 7 Run Your Project

Now we are ready to run our example so run bellow command for quick run:

php artisan serve

Now you can open bellow URL on your browser:


It will help you.....

Recommended Posts