How to Create Apexcharts Line Chart in Laravel 11

Websolutionstuff | Apr-22-2024 | Categories : Laravel PHP jQuery

Hello developers! In this article, we'll see how to create apexcharts line chart in laravel 11. ApexCharts is a modern charting library that helps developers to create beautiful and interactive visualizations for web pages.

It is an open-source project and is free to use in commercial applications. In this guide, we'll learn to create a simple dynamic line chart example in laravel 11. 

Additionally, you can create dynamic pie charts, and bar charts, with the help of ApexCharts and also you can customize them as per requirements.

How to Integrate Apexcharts Line Chart into Laravel 11

 

Step 1: Install Laravel 11

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

composer create-project laravel/laravel laravel_11_line_chart

 

Step 2: Create Route

Then, we will define the 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

Next, we'll create a UsersController.php file using the following code.

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 for the display of Apexchart line char in laravel 11.

<!DOCTYPE html>
<html>
<head>
    <title>How to Create Apexcharts Line Chart in Laravel 11 - 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>How to Create Apexcharts Line Chart in Laravel 11 - Websolutionstuff</h1>
        <div id="chart"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
        var options = {
          series: [{
            name: "Desktops",
            data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
        }],
          chart: {
          height: 350,
          type: 'line',
          zoom: {
            enabled: false
          }
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'straight'
        },
        title: {
          text: 'Product Trends by Month',
          align: 'left'
        },
        grid: {
          row: {
            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
            opacity: 0.5
          },
        },
        xaxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
        }
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
    </script>
</body>
</html>

Output:

Apexcharts Line Chart Laravel 11

 


You might also like:

Recommended Post
Featured Post
How To Add Toastr Notification In Laravel
How To Add Toastr Notification...

In this tutorial, I will show you how to add toastr notification in laravel application. There are many types of no...

Read More

May-29-2020

Laravel 9 Insert Multiple Records In Database
Laravel 9 Insert Multiple Reco...

In this article, we will see laravel 9 insert multiple records in the database. Here, we will learn how to ins...

Read More

Dec-16-2022

Carbon Add Years To Date In Laravel
Carbon Add Years To Date In La...

In this article, we will see examples of carbon adding years to date in laravel. Here we will laravel add...

Read More

Dec-07-2020

Drag and Drop File Upload Using Dropzone js in Laravel 8
Drag and Drop File Upload Usin...

This article will show drag and drop file upload using dropzone js in laravel 8. DropzoneJS is an open-source library th...

Read More

Oct-20-2020