PHPackages                             frontend-services/craft-chart-field - 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. frontend-services/craft-chart-field

ActiveCraft-plugin

frontend-services/craft-chart-field
===================================

A Chart Field plugin for Craft CMS — store and render charts using Chart.js, HighCharts, or ApexCharts.

1.0.3.1(1mo ago)00proprietaryJavaScript

Since Mar 16Pushed 1mo agoCompare

[ Source](https://github.com/frontend-services/craft-chart-field)[ Packagist](https://packagist.org/packages/frontend-services/craft-chart-field)[ RSS](/packages/frontend-services-craft-chart-field/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (1)Versions (5)Used By (0)

Chart Field
===========

[](#chart-field)

A Craft CMS 5 plugin that provides a **Chart** field type. Content editors enter data in a spreadsheet-style grid; the plugin stores it in a library-agnostic JSON format and renders it on the frontend using the charting library configured by the developer.

**Supported libraries:** Chart.js · HighCharts · ApexCharts

---

Features
--------

[](#features)

- **Spreadsheet-style data entry** — editors fill in a familiar grid; no JSON, no code, no frustration.
- **Three charting libraries, one field** — choose Chart.js (free), HighCharts, or ApexCharts per field instance; swap without touching templates.
- **14 chart types** — Line, Bar, Column, Area, Stacked variants, Pie, Donut, Scatter, Radar, Polar, Heatmap, and more.
- **Combo / mixed charts** — assign a different chart type per series (e.g. columns + line overlay) for all three libraries.
- **Live CP preview** — see the chart render in real time as data is entered, before the entry is saved.
- **Excel / Google Sheets paste** — paste a copied range directly into the grid; rows and columns are created automatically.
- **Per-series custom colours** — pick a colour for each data series directly in the column header; colour pickers for pie/donut slices too.
- **Configurable colour palettes** — ship with five built-in palettes (Default, Warm, Cool, Monochrome, Pastel) and define your own in `config/chart-field.php`.
- **HighCharts optional modules** — enable Exporting, Export Data, Accessibility, Drilldown, Data, and Annotations modules from plugin settings; each loads its CDN script automatically.
- **Library-agnostic storage** — data is saved as clean, portable JSON; switch charting libraries or go headless without re-entering data.
- **One-line frontend rendering** — `{{ entry.myChart.render() }}` outputs the container, script tag, and initialisation in a single call.
- **Developer-friendly config** — override CDN URLs, add license keys, and customise palettes via a plain PHP config file with `.env` variable support.

---

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

[](#requirements)

- Craft CMS 5.0 or later
- PHP 8.2 or later

---

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

[](#installation)

```
composer require frontend-services/craft-chart-field
php craft plugin/install chart-field
```

---

Plugin Settings
---------------

[](#plugin-settings)

Go to **Settings → Plugins → Chart Field** to configure global options.

### License Keys

[](#license-keys)

HighCharts requires a commercial license. Enter your key here so charts render without a watermark.

### Auto-load JS

[](#auto-load-js)

When enabled (default), the plugin automatically includes the charting library `` tag when `render()` is called in your template. Disable this if you prefer to include the library yourself.

### HighCharts Modules

[](#highcharts-modules)

Optional HighCharts modules that can be enabled individually. When enabled and Auto-load JS is on, each module's script is included automatically after the core library.

ModuleDescription**Exporting**Adds export and print buttons to charts**Export Data**Export chart data as CSV or XLSX (requires Exporting)**Accessibility**Screen reader support and keyboard navigation**Drilldown**Click data points to reveal sub-categories**Data**Load data from HTML tables, CSV, or Google Sheets**Annotations**Add text labels and shapes to charts### CDN URL Overrides

[](#cdn-url-overrides)

Override the default CDN URL for any library or module — useful for self-hosting, GDPR compliance, or pinning a specific version.

---

Field Settings
--------------

[](#field-settings)

Each Chart field instance can be configured independently in the field's settings screen.

SettingDescription**Charting Library**Which library to use for this field. Content authors never see this choice.**Allowed Chart Types**Which chart types the editor can pick from.**Default Color Palette**The palette applied when no custom colors are set.**Allow custom colors**Lets editors pick a custom color per series.**Show advanced styling options**Exposes legend and tooltip controls to the editor.**Show live preview**Renders a live chart preview in the CP as the editor enters data.### Supported Chart Types per Library

[](#supported-chart-types-per-library)

TypeChart.jsHighChartsApexChartsLine✅✅✅Spline✅Bar (horizontal)✅✅✅Column (vertical)✅✅✅Area✅✅✅Stacked Bar✅✅✅Stacked Column✅✅✅Stacked Area✅✅✅Pie✅✅✅Donut✅✅✅Scatter✅✅✅Radar✅✅Polar✅Polar Area✅Heatmap✅---

Twig Usage
----------

[](#twig-usage)

### Render a chart

[](#render-a-chart)

The simplest usage — outputs the container element, the library `` tag (if auto-load is on), and the initialisation script:

```
{{ entry.myChartField.render() }}
```

With null safety:

```
{% if entry.myChartField and entry.myChartField.chartType %}
    {{ entry.myChartField.render() }}
{% else %}
    No chart data available.
{% endif %}
```

With options:

```
{{ entry.myChartField.render({
    id:     'revenue-chart',
    class:  'my-chart',
    height: '500px',
    width:  '100%',
}) }}
```

### JSON only

[](#json-only)

If you want to initialise the chart yourself:

```

    new Chart(document.getElementById('my-chart'), {{ entry.myChartField.json | raw }});

```

### Manual script management

[](#manual-script-management)

Get the resolved CDN URL(s) for the configured library:

```
{% for url in entry.myChartField.jsAssets %}

{% endfor %}
```

---

Config File
-----------

[](#config-file)

Create `config/chart-field.php` in your Craft project to override any plugin setting without touching the database.

```