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.

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');

 

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

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');
    }       
}

 

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>
<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:

laravel_10_apexcharts_bar_chart_example_output

 


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

Mar-02-2022

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

Jan-25-2021

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

Jul-17-2023

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

Oct-17-2020