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.
Run the following command:
composer require akaunting/laravel-apexchartsPublish configuration
php artisan vendor:publish --tag=apexchartsYou 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')
->setWidth('100%')
->setHeight(300)
->setLabels(['Sales', 'Deposit'])
->setDataset('Income by Category', 'donut', [1907, 1923]);Then, include the JavaScript (on every page using charts).
<!-- layout.blade.php -->
<body>
<!-- ... -->
@apexchartsScripts
</body>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';
createInertiaApp({
// ...
setup({el, App, props, plugin}) {
return createApp({ render: () => h(App, props) })
.use(VueApexCharts)
.mount(el);
},
});Then, create a simple chart.vue component:
<!-- components/chart.vue -->
<template>
<apexchart
:id="chart.id"
:key="chart.id"
:type="chart.type"
:width="chart.width"
:height="chart.height"
:series="chart.series"
:options="chart.options"
/>
</template>
<script setup>
defineProps({
chart: Object,
});
</script>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 -->
<template>
<Chart :chart="chart" />
</template>
<script setup>
import Chart from './components/chart.vue';
defineProps({
chart: Object,
});
</script>composer testPlease 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.