Laravel 10 Apexcharts Bar Chart Example

Websolutionstuff | May-24-2023 | Categories : Laravel jQuery

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.

Step 1: Install Laravel 10

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

composer create-project laravel/laravel laravel_10_barchart_example


Step 2: Create Route

Then, we will create a 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

Now, we will create UsersController using the following code. And add the following code to that file.

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. So, add the following HTML code to that file.

<!DOCTYPE html>
    <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="[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>Laravel 10 Apexcharts Bar Chart Example - Websolutionstuff</h1>
        <div id="chart"></div>
        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);





You might also like:

Recommended Post
Featured Post
Laravel 9 User Role and Permission
Laravel 9 User Role and Permis...

In this article, we will show you laravel 9 user role and permission with an example. here we will see how to set u...

Read More


Laravel whereMonth and whereYear Example
Laravel whereMonth and whereYe...

In this article, we will show you laravel whereMonth and whereYear examples. whereMonth and whereYear are...

Read More


Integrating ChatGPT with Node and Vue
Integrating ChatGPT with Node...

In a world where technology and human interaction blend seamlessly, artificial intelligence (AI) holds incredible potent...

Read More


Laravel 8 PDF Generate Example
Laravel 8 PDF Generate Example

In this article, we will see a laravel 8 pdf generate example. For generating PDF file we will use the laravel-dompdf pa...

Read More