In this guide, we’ll walk you through integrating ApexCharts in your Laravel 11 application using the Larapex Charts package. This package provides a simple way to work with ApexCharts in Laravel.
ApexCharts is a JavaScript library used for creating beautiful and interactive charts on websites. It makes it easy to visualize data through various chart types like bar, line, pie, and more.
Steps to Use ApexCharts in Laravel 11:
Step 1: Install Laravel 11
composer create-project laravel/laravel ApexchartStep 2: Install ApexChart
composer require arielmejiadev/larapex-chartsThen publish Apex chart configuration
php artisan vendor:publish –tag=larapex-charts-configStep 3: Make Controller for MonthlyUsersChart
php artisan make:controller MonthlyUsersChartAdd the below code
<?php
namespace App\Charts;
use ArielMejiaDev\LarapexCharts\LarapexChart;
use App\Models\User;
use DB;
class MonthlyUsersChart
{
protected $chart;
/**
* Write code on Method
*
* @return response()
*/
public function __construct(LarapexChart $chart)
{
$this->chart = $chart;
}
/**
* Write code on Method
*
* @return response()
*/
public function build()
{
$users = User::select(DB::raw("COUNT(*) as count"), DB::raw("MONTHNAME(created_at) as month_name"))
->whereYear('created_at', date('Y'))
->groupBy(DB::raw("Month(created_at)"))
->pluck('count', 'month_name');
return $this->chart->pieChart()
->setTitle('New Users - '.date('Y'))
->addData($users->values()->toArray())
->setLabels($users->keys()->toArray());
}
}Step 4: Make Controller for ApexChart
php artisan make:controller ApexChartControllerAdd the below code
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Charts\MonthlyUsersChart;
class ApexchartsController extends Controller
{
public function index(MonthlyUsersChart $chart)
{
return view('apexcharts', ['chart' => $chart->build()]);
}
}Step 5: Create Route
Routes are defined in the Web.php file
Route::get('magecomp-chart', [ApexchartsController::class, 'index']);Step 6: Create Blade File for Chart
<!DOCTYPE html>
<html>
<head>
<title>Laravel 11 Apexcharts Chart Example - ItSolutionStuff.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="card mt-5">
<h3 class="card-header p-3">Laravel 11 Apexcharts Chart Example - ItSolutionStuff.com</h3>
<div class="card-body">
{!! $chart->container() !!}
</div>
</div>
</div>
</body>
<script src="{{ $chart->cdn() }}"></script>
{{ $chart->script() }}
</html>Step 7: Cerate Dummy Record using Tinker
php artisan tinkerUser::factory()->count(30)->create()Step 8: Run Project
php artisan serveand hit this url
Conclusion:
Using ApexCharts with Larapex Charts in Laravel 11 makes it simple to create visually appealing charts. This guide covered installation, chart creation, and integration within a Blade view. You can further customize charts to suit your application’s needs.
Happy Coding!
