How to Use Highcharts in Laravel

In today's world of data visualization, interactive charts play a crucial role in making data more digestible and presentable. Highcharts is one of the most popular charting libraries used for its versatility, ease of use, and rich interactive features. In this tutorial, we will walk you through how to integrate Highcharts into a Laravel 11 project, enabling you to create stunning and interactive charts in your application.

In this article we will implement Highcharts in laravel using JavaScript. We will use Highchart JS library to use it in Laravel.

Before diving in, make sure you have the following prerequisites:

Laravel 11 installed. If not, you can install it by following the official Laravel documentation.

Basic knowledge of Laravel and how it works.

Familiarity with frontend technologies such as basic JavaScript.

Highchart Library :

<script src="https://code.highcharts.com/highcharts.js"></script>

Create Route :

Route::get('/high-charts', [ChartController::class, 'index'])->name('charts.index');

ChartController.php :

public function index(){
        $userData = User::select(\DB::raw("COUNT(*) as count"))
                    ->groupBy(\DB::raw("Month(created_at)"))
                    ->pluck('count');
        return view('charts.index', compact('userData'));
    }

index.blade.php :

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />

        <!-- Styles -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
      
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h1> High Charts demonstration by thedevnerd </h1>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div id="charts"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div id="spline"></div>
                </div>
            </div>
        </div>
    </body>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript">
        var userData = <?php echo json_encode($userData)?>;
        Highcharts.chart('charts', {
            title: {
                text: 'New User Growth, 2020'
            },
            subtitle: {
                text: 'Source: thedevnerd.com'
            },
            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: userData
            }],
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }
        });


        Highcharts.chart('spline', {
            chart: {
                type: 'spline'
            },
            title: {
                text: 'New User Growth, 2020'
            },
            subtitle: {
                text: 'Source: thedevnerd.com'
            },
            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: userData
            }],
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }
        });
    </script>
</html>

In this example i have used two chart only that are line and spline charts. This is just for the demonstration. You can customize the charts as per your requirements and to implement other variety of charts you can give a look at the official documentation.