Laravel 11 Chart's using Highcharts JS Tutorial

Highcharts is an easy to use JS library that allows users to create different types of charts like bar charts, line charts, pie charts, graph charts, area charts, column charts, etc. in PHP Laravel 11 projects.

Steps to make bar charts, line charts, pie charts, graph charts, area charts, column charts using HighCharts JS:

Step 1: Create Chart Routes

Edit routes/web.php and add routes for bar charts, line charts, pie charts, graph charts, area charts, column:

use App\Http\Controllers\ChartController;

Route::get('/charts', [ChartController::class, 'index']);

Step 2: Create a Controller

Make controller file that allow to handle chart rendering with dynamic data on views:

php artisan make:controller ChartController

Create method in app/Http/Controllers/ChartController.php file:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ChartController extends Controller
{
    public function index()
    {
        // Generate random data for the charts
        $barData = $this->generateRandomData(5);
        $lineData = $this->generateRandomData(5);
        $pieData = $this->generateRandomData(3);
        $graphData = [['from' => 'A', 'to' => 'B'], ['from' => 'B', 'to' => 'C']];
        $areaData = $this->generateRandomData(5);
        $columnData = $this->generateRandomData(5);

        return view('charts', compact('barData', 'lineData', 'pieData', 'graphData', 'areaData', 'columnData'));
    }

    private function generateRandomData($count)
    {
        $data = [];
        for ($i = 0; $i < $count; $i++) {
            $data[] = rand(1, 10);
        }
        return $data;
    }
}

Step 3: Create Blade View For Charts

Visit resources/views folder and then create charts.blade.php view for display charts:

<!-- resources/views/charts.blade.php -->
<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Highcharts JS Example - ITCODSTUFF.COM</title>

</head>
<body>
    <div id="container-bar" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    <div id="container-line" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    <div id="container-pie" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    <div id="container-graph" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    <div id="container-area" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    <div id="container-column" style="min-width: 310px; height: 400px; margin: 0 auto"></div>


</body>
</html>

Step 4: Add Chart.js in View

Open blade view file and add highchart js and code into it:

        <script src="https://code.highcharts.com/highcharts.js"></script>
    <script>
        // Bar Chart
        Highcharts.chart('container-bar', {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Bar Chart'
            },
            series: [{
                name: 'Bar Chart',
                data: {!! json_encode($barData) !!}
            }]
        });

        // Line Chart
        Highcharts.chart('container-line', {
            chart: {
                type: 'line'
            },
            title: {
                text: 'Line Chart'
            },
            series: [{
                name: 'Line Chart',
                data: {!! json_encode($lineData) !!}
            }]
        });

        // Pie Chart
        Highcharts.chart('container-pie', {
            chart: {
                type: 'pie'
            },
            title: {
                text: 'Pie Chart'
            },
            series: [{
                name: 'Pie Chart',
                data: {!! json_encode($pieData) !!}
            }]
        });

        // Graph Chart
        Highcharts.chart('container-graph', {
            chart: {
                type: 'graph'
            },
            title: {
                text: 'Graph Chart'
            },
            series: [{
                name: 'Graph Chart',
                data: {!! json_encode($graphData) !!}
            }]
        });

        // Area Chart
        Highcharts.chart('container-area', {
            chart: {
                type: 'area'
            },
            title: {
                text: 'Area Chart'
            },
            series: [{
                name: 'Area Chart',
                data: {!! json_encode($areaData) !!}
            }]
        });

        // Column Chart
        Highcharts.chart('container-column', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Column Chart'
            },
            series: [{
                name: 'Column Chart',
                data: {!! json_encode($columnData) !!}
            }]
        });
    </script>

Step 5: Test Application

Run the php artisan serve command to start application server.

Hit the url http://localhost:8000/charts on browser to test laravel highchart JS application.

Laravel 11 Chart’s using Highcharts JS Tutorial

Step 1: Create Chart Routes

Step 2: Create a Controller

Step 3: Create Blade View For Charts

Step 4: Add Chart.js in View

Step 5: Test Application

Leave a Comment Cancel reply