In this article, we'll see how to create a pie chart in laravel 10 using apexcharts. Here, we'll use apexcharts cdn to create a pie chart in laravel 10. ApexCharts is a modern charting library that helps developers create beautiful and interactive visualizations for web pages.
ApexCharts are flexible and responsive - making your charts work on desktops, tablets as well as mobiles. ApexCharts.js is an open-source project licensed under MIT and is free to use in commercial applications. Also, you can customize the configuration as per your requirements.
Laravel 10 Dynamic Apexcharts Pie Chart
Install the laravel 10 application using the following composer command.
composer create-project laravel/laravel laravel_10_pie_chart_example
Then, we will define a route to the web.php file.
routes/web.php
<?php
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');
Now, we will create UsersController.php using the following command.
php artisan make:controller UsersController
app/Http/Controllers/UsersController.php
<?php
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');
}
}
Then, we will create an index.blade.php file. So, add the following HTML code to that file.
<!DOCTYPE html>
<html>
<head>
<title>How to Create Pie Chart in Laravel 10 using Apexcharts - Vidvatek</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="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto);
body {
font-family: Roboto, sans-serif;
}
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Laravel 10 Dynamic Apexcharts Pie Chart - Vidvatek</h1>
<div id="chart"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<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);
chart.render();
</script>
</body>
</html>
You might also like:
- Read Also: How to Create Bar Chart in Laravel 10 using Apexcharts
- Read Also: Laravel 10 Google Pie Chart Example
- Read Also: How To Create Dynamic Pie Chart In Laravel 10
- Read Also: Laravel 10 With Vue JS CRUD Operation