How to Create Apexcharts Pie Chart in Laravel 11

Websolutionstuff | Apr-19-2024 | Categories : Laravel PHP jQuery

Hello developers! In this article, we'll see how to create apexcharts pie chart in laravel 11. ApexCharts is a modern charting library that helps developers to create beautiful and interactive visualizations for web pages.

It is an open-source project and is free to use in commercial applications. In this guide, we'll learn to create a simple dynamic pie chart example in laravel 11. 

Additionally, you can create donut charts, bar charts, line charts, and column charts with the help of ApexCharts and also you can customize them as per requirements.

How to Integrate Apexcharts Pie Chart into Laravel 11


Step 1: Install Laravel 11

In this step, we will install the laravel 11 application using the following command.

composer create-project laravel/laravel laravel_11_pie_chart


Step 2: Create Route

Then, we will define the route to the web.php file. So, add the below code to that file.


use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UsersController;
| 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('index', [UsersController::class, 'create']);
Route::post('store', [UsersController::class, 'store'])->name('store');


Step 3: Create Controller

Next, we'll create a UsersController.php file using the following code.

php artisan make:controller UsersController


namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\RedirectResponse;
use App\Rules\Uppercase;
class UsersController extends Controller
     * Show the application dashboard.
     * @return \Illuminate\Http\Response
    public function create(): View
        return view('index');



Step 4: Create View File

Then, we will create an index.blade.php file for the display of Apexchart bar char in laravel 11.

<!DOCTYPE html>
    <title>How to Create Apexcharts Pie Chart in Laravel 11 - Websolutionstuff</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        @import url(;

        body {
        font-family: Roboto, sans-serif;

        #chart {
        max-width: 650px;
        margin: 35px auto;
    <div class="container">      
        <h1>How to Create Apexcharts Pie Chart in Laravel 11 - Websolutionstuff</h1>
        <div id="chart"></div>
    <script src=""></script>
        var options = {
          series: [44, 55, 13, 43, 22],
          chart: {
          width: 380,
          type: 'pie',
        labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
        responsive: [{
          breakpoint: 480,
          options: {
            chart: {
              width: 200
            legend: {
              position: 'bottom'

        var chart = new ApexCharts(document.querySelector("#chart"), options);


Apexcharts Pie Chart Integration Laravel


You might also like:

Recommended Post
Featured Post
How To Get Client IP Address In Laravel 9
How To Get Client IP Address I...

In this article, we will see how to get a client's IP address in laravel 9. Many times you need a user IP addre...

Read More


How To Merge Two Collections In Laravel
How To Merge Two Collections I...

In this article, we will see how to merge two collections in laravel 8 or laravel 9. The Illuminate\Support\Co...

Read More


Laravel 9 Many To Many Relationship Example
Laravel 9 Many To Many Relatio...

In this article, we will see laravel 9 many to many relationship example. Also, you can use many to many relationsh...

Read More


How To Toggle Dark and Light Mode using jQuery
How To Toggle Dark and Light M...

In this article, we will see how to toggle between dark and light modes using jquery. As per the current trend of web de...

Read More