zaimealabs/charts

The ZaimeaLabs Laravel Livewire Charts.

1.0.2 2024-07-12 13:52 UTC

Requires

• php: ^8.2
• ext-json: *
• illuminate/support: ^10.0|^11.0
• livewire/livewire: ^3.0

Requires (Dev)

• orchestra/testbench: ^8.0|^9.0
• phpunit/phpunit: ^10.0|^11.0

MIT

• Custură Laurențiu

• charts
• laravel
• livewire
• zaimealabs

README

Apex Charts for Laravel.

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

Installation

"repositories": [
        {
            "type": "vcs",
            "url": "https://github.com/zaimealabs/charts"
        }
    ]

composer require zaimealabs/charts

php artisan vendor:publish --tag=charts-config

php artisan vendor:publish --tag=charts-apexcharts-script

Usage

In your controller add:

$pie = Charts::pieChart()
    ->setDataset([150, 120])
    ->setTitle('Posts')
    ->setLabels(['Published', 'No Published']);

Remember to import the Facade to your controller with

use ZaimeaLabs\Charts\Facades\Charts;

Or importing the Charts class:

use ZaimeaLabs\Charts\Charts;

In your Layouts (Blade file) add in :

    @chartsScripts

Then in your view (Blade file) add: Note: if you want the charts to be dynamic, use the syntax (eg: livewire:charts-area-chart) for livewire.

<div>
    {!! $chart->container() !!}
</div>

or

<div>
    <livewire:charts-area-chart
        key="{{ $areaChartModel->reactiveKey() }}"
        :area-charts="$areaChartModel"
    />
</div>

You can use command to make charts

php artisan make:charts ChartName

More Example

$donut = Charts::donutChart()
    ->addData([200, 240, 300])
    ->setTitle('Top 3 active users from group.')
    ->setSubtitle('Season 2024.')
    ->setLabels(['User 3', 'User 10', 'User 91']);

$radial = Charts::radialChart()
    ->addData([4275, 105])
    ->setTitle('Work efficiency.')
    ->setSubtitle('How many working hours and sick leave a user has.')
    ->setLabels(['Worked', 'Sick leave'])
    ->setColors(['#D32F2F', '#03A9F4']);

$line = Charts::lineChart()
    ->addData('Hours worked', [138, 138, 145, 145, 131, 82])
    ->addData('Hours expected', [138, 140, 138, 145, 134, 82])
    ->setTitle('Hours worked during 2024.')
    ->setSubtitle('Hours worked vs Hours expected.')
    ->setXAxis(['January', 'February', 'March', 'April', 'May', 'June']);

$area = Charts::areaChart()
    ->addData('Hours worked', [138, 138, 145, 145, 131, 82])
    ->addData('Hours expected', [138, 140, 138, 145, 134, 82])
    ->setTitle('Hours worked during 2024.')
    ->setSubtitle('Hours worked vs Hours expected.')
    ->setXAxis(['January', 'February', 'March', 'April', 'May', 'June']);

$bar = Charts::barChart()
    ->addData('User 3', [6, 9, 3, 4, 10, 8])
    ->addData('User 91', [7, 3, 8, 2, 6, 4])
    ->setTitle('User 3 vs User 91.')
    ->setSubtitle('Working hours during season 2024.')
    ->setXAxis(['January', 'February', 'March', 'April', 'May', 'June']);

Customizing charts

Change chart colors dynamically

    ->setColors(['#ffc63b', '#ff6384'])

Customize Fonts

    ->setFontFamily('DM Sans')
    ->setFontColor('#ff6384')

Customize Chart Grid

    ->setGrid(); // empty adds a default style
    ->setGrid('#3F51B5', 0.1);

Customize Chart Markers

[#color1, #color2], $width , $hoverSize 

    ->setMarkers(['#FF5722', '#E040FB'], 7, 10);

Set Sparkline

    ->setSparkline()

Set Theme

    ->setTheme('dark')

Set Toolbar

    ->setToolbar(bool)

Set Tooltip

    ->setTooltip(bool, 'dark/light')

Set Animations

    ->setAnimations(bool)