Laravel 8 Highcharts Example Tutorial

In this article, we will see laravel 8 highcharts example tutorial. you will learn how to implement a highcharts in laravel 8 using highchart js. Using highcharts you can create interactive charts easily for your web projects. Highcharts is a javascript library, this library through which we can use many charts like line charts, bar charts, pie charts, stock charts, etc. Highcharts is an open-source chart library.

So, let's see how to use highcharts in laravel 8, highcharts in laravel 8, line chart, laravel 8 highcharts basic line, line chart in laravel 8, laravel 8 highcharts, highcharts line chart laravel, how to implement line chart in laravel highcharts.

For more information about highcharts: HighCharts Official Site.

A chart is a graphical representation for data visualization, in which "the data is represented by symbols, such as bars in a bar chart, lines in a line chart, or slices in a pie chart". so it's helpful in easy to understand.

Step 1: Add Routes

In this step add routes in the web.php file 

use App\Http\Controllers\UserController;

Route::get('highchart', [UserController::class, 'highChart']);



Step 2: Create Controller

Now, in this step, we'll create UserController in App\Http\Controllers path.


namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;

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

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


Step 3: Create Blade File

In this step, create a blade file for displaying highcharts. So, create an index file below the path.


<!DOCTYPE html>
    <title>Laravel 8 Highcharts Example - Techsolutionstuff</title>
    <link rel="stylesheet" href="">
<body style="border:1px solid red; margin:20px;">
<h1 class="text-center">Laravel 8 Highcharts Example - Techsolutionstuff</h1>
<div id="container"></div>
<script src=""></script>
<script type="text/javascript">
    var users =  <?php echo json_encode($users) ?>;
    Highcharts.chart('container', {
        title: {
            text: 'New User Records - 2021'
        subtitle: {
            text: 'Source: Techsolutionstuff'
         xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        yAxis: {
            title: {
                text: 'Number of Users'
        legend: {
            layout: 'horizontal',
            align: 'center',
            verticalAlign: 'bottom'
        plotOptions: {
            series: {
                allowPointSelect: true
        series: [{
            name: 'New Users',
            data: users
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'


You might also like :