PHPackages                             kirschbaum-development/nova-chartjs - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. kirschbaum-development/nova-chartjs

ActiveLibrary[Utility & Helpers](/categories/utility)

kirschbaum-development/nova-chartjs
===================================

chart.js Chart Field for Laravel Nova

2.0.0(3y ago)5140.5k—3.2%5[6 PRs](https://github.com/kirschbaum-development/nova-chartjs/pulls)MITPHPPHP ^8.0

Since May 31Pushed 3y ago16 watchersCompare

[ Source](https://github.com/kirschbaum-development/nova-chartjs)[ Packagist](https://packagist.org/packages/kirschbaum-development/nova-chartjs)[ RSS](/packages/kirschbaum-development-nova-chartjs/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (8)Dependencies (6)Versions (16)Used By (0)

[![Banner](resources/imgs/banner.png "Banner")](resources/imgs/banner.png)

Nova Chart.js
=============

[](#nova-chartjs)

[![Latest Version on Packagist](https://camo.githubusercontent.com/733c7da41a40eb4951607bb971a3e6f03fd492c6aa360a446e7a29a92c3d7ace/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6b69727363686261756d2d646576656c6f706d656e742f6e6f76612d63686172746a732e737667)](https://packagist.org/packages/kirschbaum-development/nova-chartjs)[![Total Downloads](https://camo.githubusercontent.com/d17a3a887e96db174417ca5e34072dba6f2414673fb78292addc0a47317477eb/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6b69727363686261756d2d646576656c6f706d656e742f6e6f76612d63686172746a732e737667)](https://packagist.org/packages/kirschbaum-development/nova-chartjs)

Introduction
------------

[](#introduction)

This package allows you to easily add chart.js graphs to your nova resources. This project is under active development, and currently only supports Line and Bar Charts. You are welcome to request or contribute additional charts by opening an issue.

[![Cover Image](screenshots/CoverImage.jpg "Cover Image")](screenshots/CoverImage.jpg)

Requirements
------------

[](#requirements)

This Nova field requires Nova 2.0 or higher.

Installation
------------

[](#installation)

You can install this package in a Laravel app that uses [Nova](https://nova.laravel.com) via composer:

```
composer require kirschbaum-development/nova-chartjs
```

You'll also need to run migrations to set up a database table for `NovaChartjsMetricValue`

```
php artisan migrate
```

Setup
-----

[](#setup)

After setup, your model should include the `KirschbaumDevelopment\NovaChartjs\Traits\HasChart` trait and you must implement the `KirschbaumDevelopment\NovaChartjs\Contracts\Chartable` Contract.

You must also define a static `getNovaChartjsSettings` function in the model which should return the required settings for the Chart. All other required methods and relationship defined in the contract are already defined for you in the included trait. You can also override these trait methods directly on your model.

```
use KirschbaumDevelopment\NovaChartjs\Traits\HasChart;
use KirschbaumDevelopment\NovaChartjs\Contracts\Chartable;

class Employee extends Model implements Chartable
{
    use HasChart;

    /**
     * Should return settings for Nova Chart in prescribed format
     *
     * @return array
     */
    public static function getNovaChartjsSettings(): array
    {
        return [
            'default' => [
                'type' => 'line',
                'titleProp' => 'name',
                'identProp' => 'id',
                'height' => 400,
                'indexColor' => '#999999',
                'color' => '#FF0000',
                'parameters' => ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                'options' => ['responsive' => true, 'maintainAspectRatio' => false],
            ]
        ];
    }

    // ...
}
```

Adding Custom Datsets
---------------------

[](#adding-custom-datsets)

You can also add your own custom datasets to the chart by adding a `getAdditionalDatasets` method on your model

[![Additional Dataset](screenshots/WithAdditionalDatasets.jpg "With Additional Dataset")](screenshots/WithAdditionalDatasets.jpg)

```
use KirschbaumDevelopment\NovaChartjs\Traits\HasChart;
use KirschbaumDevelopment\NovaChartjs\Contracts\Chartable;

class Employee extends Model implements Chartable
{
    use HasChart;

    //...

    /**
     * Return a list of additional datasets added to chart
     *
     * @return array
     */
    public function getAdditionalDatasets(): array
    {
        return [
            'default' => [
                [
                    'label' => 'Average Sales',
                    'borderColor' => '#f87900',
                    'data' => [80, 40, 62, 79, 80, 90, 79, 90, 90, 90, 92, 91],
                ],
            ]
        ];
    }

    // ...
}
```

You can read more about adding custom datasets in the [official chart.js documentation](https://www.chartjs.org/docs/latest/)

### Creating a range chart

[](#creating-a-range-chart)

To create a range chart you can pass on two additional datasets representing an upper and lower range and set the fill and background color property for the first data point.

```
use KirschbaumDevelopment\NovaChartjs\Traits\HasChart;
use KirschbaumDevelopment\NovaChartjs\Contracts\Chartable;

class Employee extends Model implements Chartable
{
    use HasChart;

    //...

    /**
     * Return a list of additional datasets added to chart
     *
     * @return array
     */
    public function getAdditionalDatasets(): array
    {
        return [
            'default' => [
                [
                    'label' => 'Minimum Required',
                    'borderColor' => '#f87900',
                    'fill' => '+1',
                    'backgroundColor' => 'rgba(20,20,20,0.2)',//For bar charts, this will be the fill color of the bar
                    'data' => [8, 7, 12, 19, 12, 10, 19, 9, 10, 20, 12, 11],
                ],
                [
                    'label' => 'Target',
                    'borderColor' => '#007979',
                    'fill' => false,
                    'data' => [80, 40, 62, 79, 80, 90, 79, 90, 90, 90, 92, 91],
                ],
            ]
        ];
    }

    // ...
}
```

Adding Chart
------------

[](#adding-chart)

You can add the chart to your Nova resource in three ways

1. Our recommended way of using Nova Chartjs Chart is to add the included Panel `KirschbaumDevelopment\NovaChartjs\InlinePanel` to your resource's Nova fields

[![Chartable Panel](screenshots/ChartablePanel.jpg "Chartable Panel")](screenshots/ChartablePanel.jpg)

```
namespace App\Nova;

use KirschbaumDevelopment\NovaChartjs\InlinePanel;

class Employee extends Resource
{

    //...
    public function fields(Request $request)
    {
        return [
            //...

            InlinePanel::make($this, $request, 'Chart Name'),
        ];
    }
}
```

***NOTE:*** You must pass the `Resource` (i.e. `$this`) and `$request` to the `InlinePanel` component.

As an optional argument you can pass a chart name as the third argument, `showLabel` as fourth argument, `notEditable` as the fifth argument and `hideFromIndex` as the sixth argument.

[![Panel with Label](screenshots/PanelWithLabel.jpg "Panel with Label")](screenshots/PanelWithLabel.jpg)

2. If you instead want to use the Chart inline without a panel you can do so using this code:

```
namespace App\Nova;

use KirschbaumDevelopment\NovaChartjs\NovaChartjs;

class Employee extends Resource
{

    //...
    public function fields(Request $request)
    {
        return [
            //...

            NovaChartjs::make('Panel Name', 'novaChartjsMetricValue', function () {
                return optional($this->novaChartjsMetricValue()->where('chart_name', $chartName)->first())->metric_values ?? [];
            }),
        ];
    }
}
```

[![Inline Chart without Label](screenshots/InlineMode.jpg "Inline Chart without Label")](screenshots/InlineMode.jpg)

***NOTE:*** You can pass the name of the chart as the first argument for the `make()` function. You can also chain the `showLabel()` and `notEditable()` methods to show the label and prevent editing the model data via the resource.

Without `showLabel()` chart will occupy the full width even in Inline Mode.

3. You can also display the chart as a relationship table and manage it on a separate page

```
namespace App\Nova;

use KirschbaumDevelopment\NovaChartjs\RelationshipPanel;

class Employee extends Resource
{

    //...
    public function fields(Request $request)
    {
        return [
            //...

            RelationshipPanel::make('Chart Name'),
        ];
    }
}
```

[![Chart Panel with Relationship](screenshots/AsRelationship.jpg "Chart Panel with Relationship")](screenshots/AsRelationship.jpg)

Adding Multiple Charts
----------------------

[](#adding-multiple-charts)

You can add multiple charts to your Nova resource by specifying a chart identifier.

```
namespace App\Nova;

use KirschbaumDevelopment\NovaChartjs\InlinePanel;

class Employee extends Resource
{

    //...
    public function fields(Request $request)
    {
        return [
            //...

            InlinePanel::make($this, $request, 'First Chart'),
            InlinePanel::make($this, $request, 'Second Chart', 'second_chart')
                ->showLabel()
                ->notEditable()
                ->hideFromIndex(),
        ];
    }
}
```

***NOTE:*** If no explicit identifier is specified `default` will be used as the identifier for that chart.

You can use the chart identifiers to specify separate additional datasets and settings for each charts.

```
use KirschbaumDevelopment\NovaChartjs\Traits\HasChart;
use KirschbaumDevelopment\NovaChartjs\Contracts\Chartable;

class Employee extends Model implements Chartable
{
    use HasChart;

    /**
     * Should return settings for Nova Chart in prescribed format
     *
     * @return array
     */
    public static function getNovaChartjsSettings(): array
    {
        return [
            'default' => [
                'type' => 'line',
                'titleProp' => 'name',
                'identProp' => 'id',
                'height' => 400,
                'indexColor' => '#999999',
                'color' => '#FF0000',
                'parameters' => ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                'options' => ['responsive' => true, 'maintainAspectRatio' => false],
            ],
            'second_chart' => [
                'type' => 'bar',
                'titleProp' => 'name',
                'identProp' => 'id',
                'height' => 400,
                'indexColor' => '#999999',
                'color' => '#FF0000',
                'parameters' => ['Q1', 'Q2', 'Q3', 'Q4'],
                'options' => ['responsive' => true, 'maintainAspectRatio' => false],
            ]
        ];
    }

    // ...
}
```

Settings
--------

[](#settings)

You can add following settings to model settings

1. `parameters`: It is a list of parameters label for which chart data will be collected. It should be passed as an array. e.g., \["January, "February", "March"\]
2. `height` and `width`: Dimensions of chart. It is recommended to set height and let chart adjust according to width.
3. `color`: Color value for the base model in chart.
4. `identProp`: Model property representing the primary key. defaults to `id`.
5. `labelProp`: Model property used for display label in chart. defaults to `id`.
6. `indexColor`: Bar Chart color in index view. Falls back to `color`
7. `type`: `line` or `bar`. defaults to `line`.
8. `options`: Options are passed directly to ChartJS instance can be used to customize your Chart as detailed in the [documentation](https://www.chartjs.org/docs/latest/)

Adding Chart Data
-----------------

[](#adding-chart-data)

After setup, to add chart data for any model, all you need to do is to edit the model after creating it. You will get a list of numeric inputs to add values for each parameter specified in settings.

[![Adding Chart data](screenshots/EditView.jpg "Adding Chart Data")](screenshots/EditView.jpg)

Chart data will also show on Model Index page as a Simple Bar Chart

[![Index view](screenshots/IndexView.jpg "Index View")](screenshots/IndexView.jpg)

Comparing Models
----------------

[](#comparing-models)

You can compare other related models to the current model using the comparison dropdown

[![Comparison dropdown](screenshots/ComparisonDropdown.jpg "Comparison dropdown")](screenshots/ComparisonDropdown.jpg)

You can add or remove any model to comparison to checkout how models are stacked against each other.

[![Comparison chart](screenshots/ModelComparison.jpg "Comparison chart")](screenshots/ModelComparison.jpg)

Changing Comparison Data
------------------------

[](#changing-comparison-data)

Chart comparison data is fetched through trait using a static function `getNovaChartjsComparisonData`. You can override this function in your model to change the comparison data.

```
namespace App;

use KirschbaumDevelopment\NovaChartjs\Traits\HasChart;
use KirschbaumDevelopment\NovaChartjs\Contracts\Chartable;

class Employee extends Model implements Chartable
{
    use HasChart;

    //...

    /**
     * Return a list of all models available for comparison to root model
     *
     * @return \Illuminate\Database\Eloquent\Collection
     */
    public static function getNovaChartjsComparisonData(): array
    {
        return static::with('novaChartjsMetricValue')
            ->has('novaChartjsMetricValue')
            ->get()
            ->map(function ($chartData) use ($chartName) {
                $chartData->setAttribute(
                    'novaChartjsComparisonData',
                    optional($chartData->novaChartjsMetricValue()->where('chart_name', $chartName)->first())->metric_values
                );
                return $chartData;
            })
            ->reject(function ($chartData) {
                return empty($chartData->novaChartjsComparisonData);
            })
            ->values()
            ->toArray();
    }
}
```

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

Security
--------

[](#security)

If you discover any security related issues, please email  or  instead of using the issue tracker.

Sponsorship
-----------

[](#sponsorship)

Development of this package is sponsored by Kirschbaum Development Group, a developer driven company focused on problem solving, team building, and community. Learn more [about us](https://kirschbaumdevelopment.com) or [join us](https://careers.kirschbaumdevelopment.com)!

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

42

—

FairBetter than 90% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity42

Moderate usage in the ecosystem

Community19

Small or concentrated contributor base

Maturity72

Established project with proven stability

 Bus Factor1

Top contributor holds 80.2% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~197 days

Recently: every ~303 days

Total

8

Last Release

1160d ago

Major Versions

0.3.0 → 1.0.02020-10-30

1.1.0 → 2.0.02023-03-15

PHP version history (2 changes)v0.1.0PHP >=7.1.0

2.0.0PHP ^8.0

### Community

Maintainers

![](https://www.gravatar.com/avatar/5f56743d64d77958321d43b2df49e9696d19c9dd99995730c5c38ccae50408fa?d=identicon)[Kirschbaum](/maintainers/Kirschbaum)

---

Top Contributors

[![navneetrai](https://avatars.githubusercontent.com/u/195833?v=4)](https://github.com/navneetrai "navneetrai (97 commits)")[![wilkerwma](https://avatars.githubusercontent.com/u/4114438?v=4)](https://github.com/wilkerwma "wilkerwma (12 commits)")[![luisdalmolin](https://avatars.githubusercontent.com/u/403446?v=4)](https://github.com/luisdalmolin "luisdalmolin (5 commits)")[![brandonferens](https://avatars.githubusercontent.com/u/1819546?v=4)](https://github.com/brandonferens "brandonferens (3 commits)")[![4n70w4](https://avatars.githubusercontent.com/u/38257723?v=4)](https://github.com/4n70w4 "4n70w4 (2 commits)")[![kirschbaum](https://avatars.githubusercontent.com/u/3734258?v=4)](https://github.com/kirschbaum "kirschbaum (2 commits)")

---

Tags

chartjslaravelnovalaravelchartjsnova

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/kirschbaum-development-nova-chartjs/health.svg)

```
[![Health](https://phpackages.com/badges/kirschbaum-development-nova-chartjs/health.svg)](https://phpackages.com/packages/kirschbaum-development-nova-chartjs)
```

###  Alternatives

[optimistdigital/nova-multiselect-field

A multiple select field for Laravel Nova.

3403.5M7](/packages/optimistdigital-nova-multiselect-field)[digital-creative/conditional-container

Provides an easy way to conditionally show and hide fields in your Nova resources.

116593.8k4](/packages/digital-creative-conditional-container)[genealabs/laravel-overridable-model

Provide a uniform method of allowing models to be overridden in Laravel.

92398.0k2](/packages/genealabs-laravel-overridable-model)[inspheric/nova-defaultable

Default values for Nova fields when creating resources and running resource actions.

51174.8k1](/packages/inspheric-nova-defaultable)[murdercode/nova4-tinymce-editor

Boost your Laravel Nova with the TinyMCE editor.

17165.2k](/packages/murdercode-nova4-tinymce-editor)[yieldstudio/nova-google-autocomplete

A Laravel Nova Google autocomplete field.

12218.4k](/packages/yieldstudio-nova-google-autocomplete)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)