ChartJS

Last modified by Troy Tolley on 2024/05/13 12:08

Description

Creates various types of charts using Chart.js.

Usage

{{chartjs type="..." options="{...}"}}
{
  "labels": [...],
  "datasets": [...]
}
{{/chartjs}}

Parameters

     

NameDescriptionMandatoryDefault
type

The type of chart. Choose from: line, bar, radar, pie, doughnut, polarArea, bubble, scatter.

Yes
options

Advanced options specified as JSON. Checkout the Chart.js documentation for the available configuration options. In addition to the options that can be defined in the standard ChartJS library, the following options can be used in this macro:

"opacity": 0.8Makes it possible to define an opacity level for all the background colors.
"width": "400px"Overrides the chart container width that gets computed automatically.
"height": "400px"Overrides the chart's container height that gets computed automatically. If used in combination with the width option, the option maintainAspectRatio has to be set to false for both options to be taken into account.
"backgroundColors": ["#ff16e8", "#0018f4","#065d00"]For charts of type line, bar, horizontalBar or radar, this option makes it possible to define one background color per data set or one per value, withtout the need to define the colors for each data set individually.
"afterValue": "%"Suffixes the data label values with the given sign or string (e.g. "%", "€", etc.).
"options.scales.xAxes[0].ticks.afterValue: "%"(Same for yAxes) suffixes the data labels with the given string.
"skipZeros": trueInstructs the macro to not display values equalling to 0.
"tooltips": {"maxCharactersPerLine": 50}In case of long data labels, this option makes it possible to display the full data label in the tooltips, on several lines.
"tooltips": {"position": {"left": 0.5, "bottom": 0.2}}		Allows to position the tooltips at a specific position of the canvas computed as the canvas' width or height multiplied by the given value (of "left" or "bottom"). If no value is provided, the "average" positioner is used.
No
cssClass

Additional CSS class to be added to the chart container. It can be useful in particular for setting the canvas dimensions at the CSS level.

No
title

Chart title, added as aria-label to the generated canvas

No
id

Chart identifier

No

Examples

{{chartjs type="horizontalBar" id="ckeditor-diagram-issues" title="CKEditor and Diagram Issues"
  options='{"tooltips": {"position": {"left": 0.3}}, "width": "600px", "height": "400px", "maintainAspectRatio": false}'}}
{
  "labels": [
    "Bug",
    "Improvement",
    "New Feature"
  ],
  "datasets": [{
    "label": "CKEditor",
    "data": [23, 17, 5],
    "backgroundColor": "#ff16e8"
  }, {
    "label": "Diagram",
    "data": [34, 11, 6],
    "backgroundColor": "#0018f4"
  }]
}
{{/chartjs}}
{{chartjs type="pie" id="pie-1" title="Issues"
  options='{
      "backgroundColors": ["#ff16e8", "#0018f4","#065d00"],
      "legend": {"display": false},
      "layout": {
        "padding": {
          "left": 50,
          "right": 50,
          "top": 50,
          "bottom": 50
        }
      },
      "plugins": {
        "datalabels": {
          "anchor":"end",
          "align": "end",
          "includeLegend":true
        }
      }}'}}
{
  "labels": [
    "Bug",
    "Improvement",
    "New Feature"
  ],
  "datasets": [{
    "label": "CKEditor",
    "data": [23, 17, 5]
  }]
}
{{/chartjs}}
{{chartjs type="pie" options="{~"backgroundColors~": [~"#ff16e8~", ~"#0018f4~", ~"#065d00~"]}"}}
{
  "labels": [
    "Bug",
    "Improvement",
    "New Feature"
  ],
  "datasets": [{
    "label": "CKEditor",
    "data": [23, 17, 5]
  }, {
    "label": "Diagram",
    "data": [34, 11, 6]
  }]
}
{{/chartjs}}
{{chartjs type="horizontalBar" options='{
  "backgroundColors": ["#ff16e8", "#0018f4","#065d00"],
  "legend": {"display": false},
  "afterValue": "%",
  "scales": {
    "yAxes": [{
      "barThickness": 20,
      "maxBarThickness": 20,
      "ticks": { "mirror": true, "padding": -5, "labelOffset": -20, "fontColor": "#000", "fontSize": 14}
    }],
    "xAxes": [{"ticks": {"beginAtZero": true, "stepValue": 10, "max": 100, "afterValue": "%"}}]
  },
  "tooltips": {"maxCharactersPerLine": 50}
}
'}}
{
  "labels": [
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  ],
  "datasets": [{
    "label": "Lorem ipsum",
    "data": [23, 47, 30]
  }]
}
{{/chartjs}}