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

Follow us
facebooklogo github instagram twitter