README

A Laravel wrapper for apex charts library Check the documentation on: Larapex Chart Docs.

This repository is inspired by ArielMejiaDev/larapex-charts and gives full credit to the original project.

Installation

Install the Laravel package with Composer:

composer require vnuswilliams/larapex-charts

You can also install ApexCharts in your frontend bundle (optional):

npm install apexcharts --save

Then import it in your app.js (or any other frontend entry file):

import ApexCharts from 'apexcharts'
window.ApexCharts = ApexCharts

This npm/Vite setup is optional if you prefer using the CDN, or if ApexCharts is already available in your project.

Usage

Basic example

In your controller add:

$chart = (new LarapexChart)->setTitle('Posts')
                   ->setDataset([150, 120])
                   ->setLabels(['Published', 'No Published']);

Remember to import the Facade to your controller with

use vnusWilliams\LarapexCharts\Facades\LarapexChart;

Or importing the LarapexChart class:

use vnusWilliams\LarapexCharts\LarapexChart;

Then in your view (Blade file) add:

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport"
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Chart Sample</title>
 </head>
 <body>
 
     {!! $chart->container() !!}
 
     {{ $chart->script() }}
 </body>
 </html>

$chart->script() first uses window.ApexCharts (useful when ApexCharts is loaded via npm/Vite), and automatically falls back to the CDN only if ApexCharts is not already available globally.

Livewire support (v2 & v3)

If you render charts inside Livewire components (including conditional rendering/tabs/selectors), keep using the same API:

{!! $chart->container() !!}

Then place the global script directive once in your main layout (before </body>):

@larapexChartScripts

The directive now automatically:

initializes all charts found in the page,
re-initializes charts after Livewire DOM updates,
destroys stale chart instances when elements disappear,
keeps working normally in non-Livewire projects.

Optional: if you update data from Livewire and need a full page chart refresh, emit:

$this->dispatch('larapex:refresh'); // Livewire v3

$this->emit('larapex:refresh'); // Livewire v2

More complex example

$chart = (new LarapexChart)->setType('area')
        ->setTitle('Total Users Monthly')
        ->setSubtitle('From January to March')
        ->setXAxis([
            'Jan', 'Feb', 'Mar'
        ])
        ->setDataset([
            [
                'name'  =>  'Active Users',
                'data'  =>  [250, 700, 1200]
            ]
        ]);

You can create a variety of charts including: Line, Area, Bar, Horizontal Bar, Heatmap, pie, donut and Radialbar.

More examples

Check the documentation on: Larapex Chart Docs

Contributing

The author Ariel Mejia Dev.

License

MIT

Support the project

Hey 👋 thanks for considering making a donation, with these donations I can continue working to contribute to opensource projects.

Roadmap for future versions

Add blade directive @apexchartscdn
Add blade directive @script($chart)
Add a chain options setter for charts
Update Github Actions to run tests
Update the package in general for more efficient & modern practices (spatie skeleton package)
Add ReactJS + Inertia Support
Add More complex charts
Add More complex boilerplate code using Laravel/Prompts
Add more complex boilerplate code examples using Laravel Trends Package

vnuswilliams / larapex-charts

Maintainers

Package info

Statistics

Security