ChartJS
Last modified by Vincent Massol on 2024/10/30 11:32
Description
Creates various types of charts using Chart.js.
Usage
{{chartjs type="..." options="{...}"}}
{
"labels": [...],
"datasets": [...]
}
{{/chartjs}}
{
"labels": [...],
"datasets": [...]
}
{{/chartjs}}
Parameters
| Name | Description | Mandatory | Default | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 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:
| 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}}
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}}
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}}
{
"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}}
"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}}
