PHP Classes

File: core/assets/plugins/ckeditor/plugins/chart/

Recommend this page to a friend!
  Classes of No name  >  RT Adminlte  >  core/assets/plugins/ckeditor/plugins/chart/  >  Download  
File: core/assets/plugins/ckeditor/plugins/chart/
Role: Documentation
Content type: text/markdown
Description: Documentation
Class: RT Adminlte
Generate layout and menus for Adminlte
Author: By
Last change:
Date: 4 years ago
Size: 3,811 bytes


Class file image Download

CKEditor Chart Plugin

This is a proof-of-concept plugin that adds support for injecting charts into CKEditor. To render charts, the Chart.js library is used. The plugin serves as an example of using external JavaScript libraries in CKEditor, using the widgets feature. It has lots of comments inside to help you understand how it was built.

Live Demo

View live demo.


  1. Put the plugin into the CKEditor "plugins" folder.
  2. Enable the plugin with `config.extraPlugins`.
  3. Add the `Chart` button to the toolbar if it will not appear automatically.

<pre> CKEDITOR.replace( 'editor1', {

extraPlugins: 'chart'

} ); </pre>

In case of any problems with installation, there is an online sample available that should help you get started.

Rendering charts on a website

Chart created in CKEditor is represented as a simple <div> element with data attributes. This is by design, because such a simplified form allows you to re-edit the chart in the future. It ensures that your content will be future-proof, allowing you to to use different styling for charts embed on your website when you redesign it or to use the future major versions of Chart.js library with different API/features.

To convert <div> elements into charts, include chart.min.js and widget2chart.js on your website. See the online sample.

Configuration Options


The default chart height (in pixels) in the Edit Chart dialog window.

config.chart_height = 400;


The number of rows (items to enter) in the Edit Chart dialog window.

config.chart_maxItems = 12;


Colors used to draw charts. See <a href="">Bar chart data structure</a> and <a href="">Pie chart data structure</a>.

<pre> config.chart_colors = {

// Colors for Bar/Line chart.
fillColor: 'rgba(151,187,205,0.5)',
strokeColor: 'rgba(151,187,205,0.8)',
highlightFill: 'rgba(151,187,205,0.75)',
highlightStroke: 'rgba(151,187,205,1)',
// Colors for Doughnut/Pie/PolarArea charts.
data: [ '#B33131', '#B66F2D', '#B6B330', '#71B232', '#33B22D', '#31B272', '#2DB5B5', '#3172B6', '#3232B6', '#6E31B2', '#B434AF', '#B53071' ]

}; </pre>


Chart.js configuration to use for Bar charts.

config.chart_configBar = { animation: false };


Chart.js configuration to use for Doughnut charts.

config.chart_configDoughnut = { animateRotate: false };


Chart.js configuration to use for Line charts.

config.chart_configLine = { animation: false };


Chart.js configuration to use for Pie charts.

config.chart_configPie = { animateRotate: false };


Chart.js configuration to use for PolarArea charts.

config.chart_configPolarArea = { animateRotate: false };


Charts in CKEditor

The future of this plugin

For now, this is a proof-of-concept plugin. However if you would like to leave any feedback, fill a future request, report a bug etc., feel free to do so.

Browser compatibility

Any modern browser should be supported. IE8 is not supported.


Licensed under the GPL, LGPL and MPL licenses, at your choice.

For full details about the license, please check the file.

For more information send a message to info at phpclasses dot org.