ApexCharts package for Laravel

3.1.0 2024-04-01 22:38 UTC

This package is auto-updated.

Last update: 2024-07-03 22:16:02 UTC


ApexCharts package for Laravel

Downloads Tests StyleCI License

This package allows you to generate modern and interactive charts using the ApexCharts library directly from Laravel without interacting with JavaScript, CSS, etc.

It covers all of the chart types and options available within the ApexCharts library.

Check out the Akaunting project to see it live.

Getting Started

1. Install

Run the following command:

composer require akaunting/laravel-apexcharts

2. Publish

Publish configuration

php artisan vendor:publish --tag=apexcharts

3. Configure

You can change the chart settings of your app from config/apexcharts.php file



Create an instance of the Chart class and set the data and options according to your needs.

use Akaunting\Apexcharts\Chart;

// ...

$chart = (new Chart)->setType('donut')
    ->setLabels(['Sales', 'Deposit'])
    ->setDataset('Income by Category', 'donut', [1907, 1923]);

Then, include the JavaScript (on every page using charts).

<!-- layout.blade.php -->

    <!-- ... -->


Finally, call the container and script method wherever you want to display the chart.

<!-- dashboard.blade.php -->

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

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


If you're using Vue and Inertia, install Apexcharts and their Vue 3 adapter:

npm install --save apexcharts
npm install --save vue3-apexcharts
// resources/js/app.js

import VueApexCharts from 'vue3-apexcharts';

    // ...
    setup({el, App, props, plugin}) {
        return createApp({ render: () => h(App, props) })

Then, create a simple chart.vue component:

<!-- components/chart.vue -->


<script setup>
    chart: Object,

Create an instance of Chart and call toVue() before passing it to your page:

Route::get('dashboard', function () {
    $chart = (new Chart)->setType('...');

    return inertia('dashboard', [
        'chart' => $chart->toVue(),

Finally, render the chart:

<!-- pages/dashboard.vue -->

    <Chart :chart="chart" />

<script setup>
import Chart from './components/chart.vue';

    chart: Object,


composer test


Please see Releases for more information what has changed recently.


Pull requests are more than welcome. You must follow the PSR coding standards.


Please review our security policy on how to report security vulnerabilities.



The MIT License (MIT). Please see LICENSE for more information.