PHPackages                             vemcogroup/nova-charts - 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. [Templating & Views](/categories/templating)
4. /
5. vemcogroup/nova-charts

ActiveLibrary[Templating & Views](/categories/templating)

vemcogroup/nova-charts
======================

A Laravel Nova card to show charts from the Chart.js library.

4.0(4y ago)8342↓100%2MITPHPPHP ^8.0CI failing

Since Dec 13Pushed 4y ago1 watchersCompare

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

READMEChangelog (4)Dependencies (1)Versions (11)Used By (0)

A Nova card to use add ChartJS charts
=====================================

[](#a-nova-card-to-use-add-chartjs-charts)

[![Latest Version on Packagist](https://camo.githubusercontent.com/9e3eaebe17f8040e4c7ff18569a9dcb4dbe7eec0c20eca9f81e2eac95a8ed43a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f76656d636f67726f75702f6e6f76612d6368617274732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/vemcogroup/nova-charts)[![Total Downloads](https://camo.githubusercontent.com/daaf2105f57f4b6f55a8fdc6b24800ee254450d0aff02679360015dc4c9f97ab/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f76656d636f67726f75702f6e6f76612d6368617274732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/vemcogroup/nova-charts)

This card tool gives the possibility to add cards with charts from [Chart.js](https://www.chartjs.org/).

[![Screenshot 2019-12-13 at 09 55 37](https://user-images.githubusercontent.com/283184/70787345-c243b480-1d8e-11ea-98d5-6cb36764c4b2.png)](https://user-images.githubusercontent.com/283184/70787345-c243b480-1d8e-11ea-98d5-6cb36764c4b2.png)

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

[](#installation)

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

```
composer require vemcogroup/nova-charts
```

Usage
-----

[](#usage)

You can now use add card with charts from your resources data.

First you need to add the trait `HasGraphData` to the models that should show chart data.

```
use Vemcogroup\Charts\Traits\HasChartData;

class Product extends Model
{
    use HasChartData;
    ...
}
```

The trait has 2 functions which can be extended to show chart data:

```
public function chartResourceData($selection)
{
    return [
        'labels' => [],
        'datasets' => [],
    ];
}

public function chartDashboardData($selection)
{
    return $this->chartResourceData($selection);
}
```

When adding the chart card to a resource these options are available:

**At the moment its only possible to use chart on resource detail page**

```
return [
    (new \Vemcogroup\Charts\Chart)->onlyOnDetail()
];
```

### Title

[](#title)

You can set the title of the card.

```
(new \Vemcogroup\Charts\Chart())->title('Title of card');
```

### Description

[](#description)

You can set the description of the card which will be shown below title.

```
(new \Vemcogroup\Charts\Chart())->description('Description of card');
```

### Type

[](#type)

There are at the moment 3 types of charts available:

```
\Vemcogroup\Charts\Chart::CHART_TYPE_BAR = 'bar';
\Vemcogroup\Charts\Chart::CHART_TYPE_STACKED_BAR = 'stackedBar';
\Vemcogroup\Charts\Chart::CHART_TYPE_LINE = 'line';
```

You can set your chart type like this, default is `bar`

```
(new \Vemcogroup\Charts\Chart())->type(\Vemcogroup\Charts\Chart::CHART_TYPE_BAR);
```

### Labels

[](#labels)

If you dont want to display labels on the chart, you able to hide them.

```
(new \Vemcogroup\Charts\Chart())->withoutLabels();
```

### Legends

[](#legends)

If you dont want to display legends on the chart, you able to hide them.

```
(new \Vemcogroup\Charts\Chart())->withoutLegends();
```

### Selections

[](#selections)

You are able to create a section of selections below the chart that, when clicked, will change the data with the selection ex. selections of years.

By default selections are hidden until set.

```
(new \Vemcogroup\Charts\Chart())->selections([2018, 2019, 2020, 2021, 2022]);
```

You are also able to select which selection to start from.

```
(new \Vemcogroup\Charts\Chart())->startFromSelection(2019);
```

### Model (v3.x)

[](#model-v3x)

#### Only for version 3.x

[](#only-for-version-3x)

Its required to set the model from where you want the data.

```
(new \Vemcogroup\Charts\Chart())->model(\App\Company::class)
```

### Resource (2.x | 1.x)

[](#resource-2x--1x)

#### Only for version 1.x | 2.x

[](#only-for-version-1x--2x)

If you want to show a chart on a dashboard the chart dont know what resources to take data from, this can be defined by this option.

Remember to type resource as plural, ex companies

```
(new \Vemcogroup\Charts\Chart())->resource('companies');
```

When using a chart on dashboard remember to override the function `chartDashboardData($selection)`

###  Health Score

33

—

LowBetter than 75% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity20

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity68

Established project with proven stability

 Bus Factor1

Top contributor holds 80% 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 ~88 days

Recently: every ~130 days

Total

10

Last Release

1543d ago

Major Versions

1.0.2 → 2.0.02020-03-03

2.0.0 → 3.0.02020-03-11

3.0.4 → 4.02022-02-17

PHP version history (3 changes)1.0.0PHP ^7.2

3.0.4PHP ^7.2|^8.0

4.0PHP ^8.0

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/38252305?v=4)[Vemco Group A/S](/maintainers/vemcogroup)[@vemcogroup](https://github.com/vemcogroup)

---

Top Contributors

[![eldor](https://avatars.githubusercontent.com/u/283184?v=4)](https://github.com/eldor "eldor (4 commits)")[![makije](https://avatars.githubusercontent.com/u/1318142?v=4)](https://github.com/makije "makije (1 commits)")

---

Tags

chartjschartslaravelnovalaravelchartchartjsnova

### Embed Badge

![Health badge](/badges/vemcogroup-nova-charts/health.svg)

```
[![Health](https://phpackages.com/badges/vemcogroup-nova-charts/health.svg)](https://phpackages.com/packages/vemcogroup-nova-charts)
```

###  Alternatives

[whitecube/nova-flexible-content

Flexible Content & Repeater Fields for Laravel Nova.

8053.0M25](/packages/whitecube-nova-flexible-content)[outl1ne/nova-multiselect-field

A multiple select field for Laravel Nova.

3402.9M2](/packages/outl1ne-nova-multiselect-field)[waynestate/nova-ckeditor4-field

This nova package allows you to use CKEditor 4 for text areas.

62739.1k8](/packages/waynestate-nova-ckeditor4-field)[saumini/ellipsis-textarea

A Laravel Nova textarea field with ellipsis support

12146.9k](/packages/saumini-ellipsis-textarea)[joshmoreno/nova-html-field

A Laravel Nova field for rendering custom html on index, detail, and forms.

1398.6k2](/packages/joshmoreno-nova-html-field)

PHPackages © 2026

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