In this article, we will see the laravel 10 apexcharts bar chart example. Here, we will learn about how to create a bar chart in laravel 10 using apexcharts. ApexCharts is a modern charting library that helps developers to 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.
So, let's see how to implement a bar chart in laravel 10, how to create apexcharts bar chart in laravel 10, apexcharts in laravel, and apexcharts bar chart example.
In this step, we will install laravel 10 application using the following command.
composer create-project laravel/laravel laravel_10_barchart_example
Then, we will create a route to the web.php file. So, add the below code to that 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 using the following code. And add the following code to that file.
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>Laravel 10 Apexcharts Bar Chart Example - 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="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 Apexcharts Bar Chart Example - Websolutionstuff</h1>
<div id="chart"></div>
</div>
<script>
var options = {
chart: {
type: 'bar'
},
series: [{
name: 'sales',
data: [30,40,45,50,49,60,70,91,125]
}],
xaxis: {
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
</body>
</html>
Output:
You might also like:
As an Angular 15 developer, I understand the importance of incorporating image upload functionality with a progress bar...
Jun-21-2023
In the dynamic realm of modern web development, ensuring that APIs are well-documented, easy to comprehend, and seamless...
Aug-18-2023
In this article, we will see the laravel accessor and mutator example. Here, we will learn what is accessor an...
Mar-16-2021
In this article, we will see how to live search in laravel 9 using Meilisearch. Here we will learn live search in l...
Dec-13-2022