- Notifications
You must be signed in to change notification settings - Fork18
ApexCharts package for Laravel
License
akaunting/laravel-apexcharts
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This package allows you to generate modern and interactive charts using theApexCharts library directly fromLaravel without interacting with JavaScript, CSS, etc.
It covers all of the charttypes andoptions available within theApexCharts library.
Check out theAkaunting project to see it live.
Run the following command:
composer require akaunting/laravel-apexcharts
Publish configuration
php artisan vendor:publish --tag=apexcharts
You can change the chart settings of your app fromconfig/apexcharts.php file
Create an instance of theChart class and set the data and options according to your needs.
useAkaunting\Apexcharts\Chart;// ...$chart = (newChart)->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 thecontainer andscript 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 apexchartsnpm install --save vue3-apexcharts
// resources/js/app.jsimportVueApexChartsfrom'vue3-apexcharts';createInertiaApp({// ...setup({el, App, props, plugin}){returncreateApp({render:()=>h(App,props)}).use(VueApexCharts).mount(el);},});
Then, create a simplechart.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 ofChart and calltoVue() before passing it to your page:
Route::get('dashboard',function () {$chart = (newChart)->setType('...');returninertia('dashboard', ['chart' =>$chart->toVue(), ]);});
Finally, render the chart:
<!-- pages/dashboard.vue--><template> <Chart:chart="chart" /></template><script setup>importChartfrom'./components/chart.vue';defineProps({ chart:Object,});</script>
composertestPlease seeReleases for more information what has changed recently.
Pull requests are more than welcome. You must follow the PSR coding standards.
Please reviewour security policy on how to report security vulnerabilities.
The MIT License (MIT). Please seeLICENSE for more information.
About
ApexCharts package for Laravel
Topics
Resources
License
Security policy
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.