Skip to content

A ChartJs widget for laravel Nova Dashboard.

License

Notifications You must be signed in to change notification settings

dcasia/chartjs-widget

Repository files navigation

ChartJS Widget for Nova Dashboard

Latest Version on Packagist Total Downloads License

Nova ChartJs Widget

A ChartJs widget for laravel Nova Dashboard.

Installation

You can install the package via composer:

composer require digital-creative/chartjs-widget

Basic Usage

Most of the configuration options can be inferred directly from the official Chart.js documentation.

use DigitalCreative\ChartJsWidget\Charts\BarChartWidget;
use DigitalCreative\NovaDashboard\Filters;
use Illuminate\Support\Collection;
use Laravel\Nova\Http\Requests\NovaRequest;

class Example extends BarChartWidget
{
    public function configure(NovaRequest $request): void
    {
        /**
         * These set the title and the button on the top-right if there are multiple "tabs" on this view
         */
        $this->title('Example BarChart');
        $this->buttonTitle('BarChart');
        $this->backgroundColor(dark: '#1e293b', light: '#ffffff');

        $this->padding(top: 30, bottom: 5);

        $this->tooltip([]); // https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip
        $this->scales([]);  // https://www.chartjs.org/docs/latest/axes/#axes
        $this->legend([]);  // https://www.chartjs.org/docs/latest/configuration/legend.html#legend
        $this->elements();  // https://www.chartjs.org/docs/latest/configuration/elements.html#elements

        /**
         * These will create another tab on the same view, it doesn't necessarily need to be
         * another chart of the same type it can be any other chart.
         */
        $this->addTab(Chart2::class);
        $this->addTab(Chart3::class);
    }

    public function value(Filters $filters): array
    {
        return [
            'labels' => Collection::range(0, 5)->map(fn () => fake()->word()),
            'datasets' => Collection::range(0, 5)->map(fn () => [
                'data' => Collection::range(0, 5)->map(fn () => fake()->numberBetween(0, 100)),
            ]),
        ];
    }
}

All chart types are available:

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

Other Packages You Might Like

License

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