How to Use Highcharts with Laravel 8.x

Published on Dec 30, 2021

Hello artisans, In this tutorial, I will show you how you can use Highcharts with Laravel. Highcharts is a js library, by which we can use bar chart, line chart, area chart, column chart etc. So, no more talk and let’s get dive into the topic.

Note: Tested on Laravel 8.65.

Table of Contents

  1. Create and Configure Controller
  2. Create Route
  3. Create and Configure View
  4. Create Dummy Data
  5. Output

Create and Configure Controller

In this step, we firstly create a controller. So, fire the below command in your terminal.

php artisan make:controller ChartController

This will create a controller under app\Http\Controller. Open up this file and paste the below code:


namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class ChartController extends Controller
    public function index()
        $users = User::select(DB::raw("COUNT(*) as count"))
            ->whereYear('created_at', date('Y'))

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

Create Route

Put the below route in your web.php

Route::get('chart', [\App\Http\Controllers\ChartController::class,'index']);

Create and Configure View

In this step, first we need to create a blade file under resources/views called chart.blade.php. After creating a file, paste the below code into the file:

<!DOCTYPE html>
    <title>Highcharts Example -</title>


<div id="container"></div>

<script src=""></script>

<script type="text/javascript">
    var users =  @json($users);

    Highcharts.chart('container', {
        title: {
            text: 'New User Growth, 2021'
        subtitle: {
            text: 'Source:'
        xAxis: {
            categories: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
        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'

Create Dummy Data

For creating dummy data, we will use tinker. If you heard for the first time about tinker then I will recommend you to see one of my articles on Tinker. So, fire the below command into your terminal:

 php artisan tinker


Now if you run your project and go to , then you will find the below output

Laravel Highchart Tutotial

And that’s it, you’ve successfully implemented the Highcharts in your application. You can find more chart’s in the official documentation of Highcharts.

That’s all for today. You can download the project from GitHub also. Thanks for reading ?

Comments (0)