ck5_chart_builder

CKEditor 5 Chart Builder embeds live, interactive Chart.js charts directly inside any CKEditor 5 body field on Drupal 10 and 11 sites. Click a toolbar button, fill in a modal dialog, and a fully rendered chart appears at the cursor — no coding, no shortcodes, and no custom field types required. Ten chart types are supported out of the box: Area, Bar, Horizontal Bar, Stacked Bar, Pie, Doughnut, Scatter, Bubble, Radar, and Line. Charts are stored as plain <div> elements with data-* attributes, so they are portable, cache-friendly, and require no special database tables.

Features

Ten Chart Types

• Area Chart — Multi-dataset line-with-fill chart. Per-dataset colour, line tension, fill opacity, and point radius.
• Bar Chart — Vertical grouped bar chart with multi-dataset support. Bars that meet or exceed a threshold are automatically coloured red.
• Horizontal Bar Chart — Same as Bar Chart with axes swapped — ideal for ranked lists with long category labels.
• Stacked Bar Chart — Vertical bar chart where datasets stack on top of each other for part-to-whole visualisation.
• Pie Chart — Circular proportional chart. Each slice has its own label, value, and colour, all configurable from a drag-and-drop table.
• Doughnut Chart — Pie Chart with a configurable hollow centre. Supports a cutout percentage and optional centre label text.
• Scatter Chart — X/Y coordinate chart for correlations. Each dataset is a series of coordinate pairs.
• Bubble Chart — Scatter Chart with a third dimension: bubble radius encodes a third variable per data point.
• Radar Chart — Spider/web chart for comparing multiple quantitative variables across categories.
• Line Chart — Clean multi-dataset trend line without area fill.

Editor Experience

• No coding required — Every option is configured through a modal dialog inside the CKEditor 5 toolbar. No shortcodes, no custom fields, no templates to edit.
• Live editor preview — Charts render as full Chart.js canvases immediately after saving the configuration dialog, so editors see exactly what site visitors will see.
• Double-click to edit — Double-click any chart widget in the editor to reopen its configuration dialog with all current values pre-populated.
• Multiple datasets — Area, Bar, Horizontal Bar, Stacked Bar, Line, Scatter, Bubble, and Radar all support multiple coloured datasets in a single chart.
• Drag-and-drop reorder — Slices (Pie/Doughnut) and labels (all types) can be reordered by dragging rows in the configuration form.

Display & Canvas Options

• Custom canvas size — Width and height accept any CSS length value (px, %, rem, vw) or a preset from a dropdown. Each chart instance stores its own dimensions independently.
• Data labels — Optional numeric values printed directly on bars, points, and slices via chartjs-plugin-datalabels 2.2.0.
• Threshold reference line — Optional dashed reference line at any Y value via chartjs-plugin-annotation 3.1.0. Useful for targets or warning limits.
• Legend, grid, axis range — Toggle legend visibility, position, grid lines, and Y-axis min/max per chart instance.
• Value unit & decimal places — Prepend a currency or unit symbol to axis ticks and tooltips; control decimal precision from 0 to 6 digits.
• Responsive — Charts fill their container on the frontend and scale gracefully on mobile.

Technical Highlights

• Clean HTML storage — Each chart is a single <div> with data-* attributes. No tokens, no shortcodes, no custom database tables.
• Automatic asset loading — A built-in text filter scans saved HTML and attaches Chart.js only on pages that actually contain charts — zero overhead on pages without them.
• Chart.js 4.5.1 loaded from jsDelivr CDN (or self-hosted). Supports offline/CSP environments by swapping CDN paths to local files in ck5_chart_builder.libraries.yml.
• Per-instance isolation — Colours, dimensions, and all settings are stored per chart; changing one chart never affects another.

Post-Installation

After enabling the module, two configuration steps are needed before charts appear:

1. Enable the text format filter.
   
   Go to Configuration → Content authoring → Text formats and editors (/admin/config/content/formats). Click Configure next to the format used on your body fields (typically Full HTML). Under Enabled filters, tick CKEditor 5 Chart Builder Asset Loader and click Save configuration. Without this filter, charts will not render for site visitors.
2. Add toolbar buttons.
   
   On the same text format configuration page, scroll to the CKEditor 5 toolbar section. Drag any or all chart buttons from the Available items tray into an active toolbar row: Area Chart, Bar Chart, Horizontal Bar, Stacked Bar, Pie Chart, Doughnut Chart, Scatter Chart, Bubble Chart, Radar Chart, Line Chart. Click Save configuration, then run drush cr.

Charts can now be inserted from the CKEditor 5 toolbar:

1. Place your cursor in a body field and click a chart button.
2. Fill in the Chart Configuration modal (title, labels, datasets, colours, dimensions, display options).
3. Click Save & Insert into Editor — the chart renders immediately as a live preview.
4. Save the node. The chart is stored as a <div> with data-* attributes.
5. To edit later, double-click the chart widget in the editor.

Allowed HTML tags: If your text format uses a Limit allowed HTML tags filter, you must allow <div> with the relevant data-* attributes, or switch to a format without tag restrictions. Full HTML works out of the box.

Additional Requirements

• Drupal 10.x or 11.x
• Drupal core modules: CKEditor 5 and Filter (both included in Drupal core ≥ 9.3)
• Internet access for CDN assets or locally hosted copies of:
  • Chart.js 4.5.1
  • chartjs-plugin-datalabels 2.2.0
  • chartjs-plugin-annotation 3.1.0

For offline or CSP-restricted environments, download the three JS files above, place them in js/vendor/ inside the module, and update the CDN entries in ck5_chart_builder.libraries.yml to local paths.

Recommended Modules / Libraries

• CKEditor 5 Premium Features —
  If your editorial workflow uses CKEditor 5 premium plugins (revision history, track changes, real-time collaboration), CK5 Chart Builder coexists cleanly alongside them as an independent toolbar plugin.
• Editor Advanced Link —
  Useful when editors need to add hyperlinks around or near chart widgets; both plugins share the same CKEditor 5 toolbar without conflict.
• A Redis or Memcache cache backend —
  For high-traffic pages with many charts, swapping Drupal's render cache to Redis or Memcache reduces the cost of re-rendering the HTML containing chart data-* attributes.
• Antibot or a CSP configuration module —
  If your site has a strict Content Security Policy, consider a module that helps manage the script-src directive so the jsDelivr CDN URLs are explicitly allowed.

Similar Projects

• Charts —
  The Charts module provides chart rendering as a dedicated field type and Views integration, supporting multiple charting libraries (Google Charts, Highcharts, Chart.js, Billboard.js). It is well suited to structured data already stored in Drupal fields. CK5 Chart Builder takes a different approach: charts are authored inline inside the CKEditor 5 body field itself, with no separate field type, no structured data storage, and no Views dependency — making it ideal for editorial teams who want to drop a chart into a long-form article exactly where the narrative calls for it.
• CKEditor Charts (CKEditor 4) —
  An older module providing chart insertion for the CKEditor 4 toolbar. CK5 Chart Builder is built exclusively for CKEditor 5 (the default editor in Drupal 10/11), supports Chart.js 4.x, and adds ten chart types with multi-dataset support, data labels, threshold lines, and individual canvas sizing — none of which were available in the CKEditor 4 equivalent.
• Manual iframe / HTML embeds —
  Some sites embed charts by pasting raw <iframe> or <script> tags into the source editor. CK5 Chart Builder replaces this fragile workflow with a structured modal form, validated input, automatic asset loading, and a live WYSIWYG preview — with no knowledge of Chart.js API syntax required.

Supporting This Module

If CKEditor 5 Chart Builder saves you time on your project, the best ways to support continued development are:

• Report bugs and suggest features in the project issue queue.
• Contribute patches, additional test coverage, or documentation improvements via the issue queue.
• Post a review on the project page — community ratings help other Drupal developers discover the module.
• Help test release candidates against new Drupal 10 and 11 minor versions.

When reporting an issue, please include your Drupal core version, PHP version, browser, the exact steps to reproduce, and any relevant output from Reports → Recent log messages (/admin/reports/dblog) filtered by the ck5_chart_builder channel.

Community Documentation

• Full installation, configuration, architecture, and troubleshooting documentation is available in the README.md file included in the module.
• A chart-type reference — covering all per-type fields, dataset structure, and display options — is included in the README under Chart types & configuration.
• For an explanation of how charts are stored as data-* attributes and how the text filter attaches Chart.js only when needed, see the How charts are stored and Architecture overview sections of the README.
• Video walkthroughs, tutorial articles, and live demo links are welcome contributions — please post them in the issue queue and they will be linked here.