Laravel Community Tools by Tighten
Laravel Nova icon Nova Packages
C

ChartJS Widget

Installation Instructions

You can install the package via composer:

composer require mlsolutions/chartjs-widget

Readme

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 mlsolutions/chartjs-widget

Basic Usage

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

use MlSolutions\ChartJsWidget\Charts\BarChartWidget;
use MlSolutions\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.

Back to Top
Added 10 months ago
Last updated 10 Months Ago
Version v1.0.10
Nova Version ^5.0
Composer
mlsolutions/chartjs-widget
GitHub stars 1
Packagist downloads 5,262

Favorites

0 users favorited

Rating

N/A
(out of 5)
★★★★★
★★★★
★★★
★★
0 ratings

Brought to you by Tighten

Issues/Feature Requests Stats Package Ideas