Laravel 12 Highcharts Integration Step-by-Step Chart Tutorial
Hi, Laravel developers! I’m thrilled to guide you through integrating Highcharts, a powerful JavaScript charting library, into your Laravel 12 application. Highcharts makes it easy to create interactive, responsive charts for data visualization.
In this beginner-friendly tutorial, we’ll build a line chart to display monthly user growth data. Whether you’re visualizing sales, users, or other metrics, this guide will help you get started with clear, simple steps.
Prerequisites
Before we begin, ensure you have:
- A Laravel 12 project set up.
- A database configured (e.g., MySQL, SQLite).
- Composer installed.
Step 1: Install Laravel 12
If you already have a Laravel 12 project, skip this step. Otherwise, run:
composer create-project laravel/laravel example-app
Navigate to your project directory:
cd example-app
Step 2: Set Up the Database
Configure your database in the env file. For example, for MySQL:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_username
DB_PASSWORD=your_password
Run the default migrations to create the users table:
php artisan migrate
Step 3: Create Dummy User Records
To visualize user growth, we’ll generate dummy user records using Laravel’s factory. Run:
php artisan tinker
In the tinker shell, create 30 users with random created_at timestamps:
User::factory()->count(30)->create()
Exit tinker with exit. This spreads users across months for meaningful chart data.
Step 4: Create a Route
Define a route to display the chart. Open routes/web.php and add:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HighchartController;
Route::get('/chart', [HighchartController::class, 'index'])->name('chart.index');
This route points to an index method in a HighchartController.
Step 5: Create the Controller
Create a controller to fetch user data:
php artisan make:controller HighchartController
Open app/Http/Controllers/HighchartController.php and add:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\Support\Facades\DB;
use Illuminate\View\View;
class HighchartController extends Controller
{
public function index(): View
{
$users = User::select(DB::raw("COUNT(*) as count"))
->whereYear('created_at', date('Y'))
->groupBy(DB::raw("MONTH(created_at)"))
->orderBy(DB::raw("MONTH(created_at)"))
->pluck('count')
->toArray();
$months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$userData = array_fill(0, 12, 0); // Initialize with zeros
foreach ($users as $index => $count) {
$userData[$index] = $count; // Fill with actual counts
}
return view('chart', compact('userData', 'months'));
}
}
Step 6: Create the Blade View with Highcharts
Create a Blade file named chart.blade.php in resources/views and add:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel 12 Highcharts Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div class="container mt-5">
<div class="card">
<h3 class="card-header p-3">Laravel 12 Highcharts Example</h3>
<div class="card-body">
<div id="chart-container"></div>
</div>
</div>
</div>
<script>
Highcharts.chart('chart-container', {
title: {
text: 'User Growth, {{ date('Y') }}'
},
subtitle: {
text: 'Source: Your Laravel App'
},
xAxis: {
categories: @json($months),
title: {
text: 'Month'
}
},
yAxis: {
title: {
text: 'Number of New Users'
},
min: 0
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series: [{
name: 'New Users',
data: @json($userData)
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
</script>
</body>
</html>
Step 7: Run the Application
Start your Laravel server:
php artisan serve
You’ll see a line chart showing the number of new users per month for the current year.
Conclusion
Integrating Highcharts with Laravel 12 is a fantastic way to visualize data in your web app! In this tutorial, I showed you how to create a line chart to display monthly user growth using real database data. Highcharts’ flexibility lets you customize charts to fit your needs, whether you’re tracking users, sales, or other metrics.
Frequently Asked Questions (FAQs)
Q1: Can I use Highcharts with other data from my database?
A: Yes! Modify the controller’s query to fetch any data (e.g., sales, orders) using Eloquent or DB queries, then pass it to the Blade view.
Q2: What chart types does Highcharts support?
A: Highcharts supports line, bar, pie, area, column, scatter, and more. Change the series type in the JavaScript (e.g., type: 'bar') to switch chart types.
Q3: Why is my chart not showing?
A: Ensure the Highcharts CDN is loaded, the chart-container ID matches the JavaScript, and $userData and $months are correctly passed. Check the browser console for errors.
Q4: Should I use a CDN or npm for Highcharts?
A: The CDN is quick for simple projects, as shown here. Use npm for larger apps to bundle Highcharts with your assets and optimize performance.
Q5: How do I make the chart interactive?
A: Highcharts is interactive by default (e.g., tooltips on hover). Add options like plotOptions.series.allowPointSelect for clickable points or exporting.enabled for download buttons. Check Highcharts documentation for more.
You might also like :
- Read Also: Laravel 9 Dynamic Line Chart Example
- Read Also: How To Create Tailwind CSS Pie Chart
- Read Also: How to Generate PDF with Chart in Laravel 11
- Read Also: Laravel 12 Google Login with Socialite: Step-by-Step Tutorial
