Skip to content

Latest commit

 

History

History
179 lines (122 loc) · 3.77 KB

README.md

File metadata and controls

179 lines (122 loc) · 3.77 KB
Raw

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

Usage

Blade

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() !!}

Vue

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>

Testing

composer test

Changelog

Please see Releases for more information what has changed recently.

Contributing

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

Security

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

Credits

License

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