1. Install the Highcharts package using Composer:
composer require highcharts/highcharts
2. Create a controller to handle the chart data:
php artisan make:controller ChartController
3. Create a route to the controller:
Route::get(‘/chart’, ‘ChartController@index’);
4. In the controller, create a method to return the chart data:
public function index()
{
$chartData = [
‘title’ => ‘My Chart’,
‘xAxis’ => [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’],
‘series’ => [
[
‘name’ => ‘Sales’,
‘data’ => [1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000, 11000, 12000]
]
]
];
return view(‘chart’, compact(‘chartData’));
}
5. Create a view to display the chart:
@section(‘scripts’)
@endsection
6. Visit the route in the browser to view the chart.
Highcharts js is a simple JavaScript library. Which is very easy to use. Using this you can create pie charts, line charts, bar charts, graph charts and etc charts in Laravel 10 application.
Hightcharts in laravel 10 apps; In this tutorial, you will learn how to create any types of chart(pie, line, bar, graph & stack) using highcharts in Laravel 10 apps.
How to add charts in Laravel 10 using Highcharts
By using the following steps, you can create pie charts, line charts, bar charts and etc charts in Laravel 10 application.
- Step 1: Define Routes
- Step 2: Create a Controller
- Step 3: Create Blade File
- Step 4: Run Development Server
Step 1: Define Routes
In the first step, you need to create routes for highchart.
So go to routes/web.php and update the below route in your file:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HighChartController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('highchart', [HighChartController::class, 'index']);
Step 2: Create a Controller
In this step, execute the following command on terminal to create a new controller name HighChartController.php:
php artisan make:controller HighChartController
Once you have created controller file. Now you need to add the following code into HighChartController.php, which is located on app/Http/Controller directory:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class HighChartController extends Controller
{
/**
* The attributes that are mass assignable.
*
* @var array
*/
public function index()
{
$users = User::select(\DB::raw("COUNT(*) as count"))
->whereYear('created_at', date('Y'))
->groupBy(\DB::raw("Month(created_at)"))
->pluck('count');
return view('highchart', compact('users'));
}
}
Step 3: Create Blade File
In this step, create a blade view file name highchart.blade.php. So go to the resources/views/ and update the below javascript and HTML code for displaying the highchart:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 10 Highcharts Example - Tutsmake.com</title>
</head>
<body>
<h1>Laravel 10 Highcharts Example - Tutsmake.com</h1>
<div id="container"></div>
</body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
var users = <?php echo json_encode($users) ?>;
Highcharts.chart('container', {
title: {
text: 'New User Growth, 2019'
},
subtitle: {
text: 'Source: Tutsmake.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
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'
}
}
}]
}
});
</script>
</html>
Note: Don’t forget to include the highchart js libraries on your blade view file and you can add or remove this library according to your requirement.
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
Or also don’t forget to add this javascript code. The highchart library also provides so many options for the highchart. You can change or modify according to your requirement:
<script type="text/javascript">
let chart = JSON.parse(`<?php echo $chart ?>`);
Highcharts.chart('container', {
title: {
text: 'New User Growth, 2019'
},
subtitle: {
text: 'Source: tutsmake.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Number of New Users'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
allowPointSelect: true
}
},
series: [{
name: 'New Users',
data: chart
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
</script>
Step 4: Run Development Server
Open the terminal and execute the following command to start the development server:
php artisan serve
Then open browser and fire the below given url on it:
http://127.0.0.1:8000/highchart
