Please check out our YouTube video or our Live Demo to get an idea about how Chart.js Diagrams for Confluence Cloud works.
Table of Contents
Installation
As any app for Confluence Cloud, you can install the app via the Confluence admin menu.
Log into your Confluence instance as an admin.
Click on “Apps > Manage apps” in the header menu.
Click on “Find new apps” on the right navigation.
Search for “Chart.js Diagrams for Confluence Cloud” and select it.
Click on “Try it free” to install the app.
Usage
DataTables for Confluence provides macros to create beautiful charts:
Chart.js pie chart: Creates a pie chart based on a Confluence table.
Chart.js line chart: Creates a line chart based on a Confluence table.
Chart.js bar chart: Creates a bar chart based on a Confluence table.
Chart.js radar chart: Creates a radar chart based on a Confluence table.
To make use of one of the macros click the “Insert” / “+” Button in the edit mode, select one of the macros and add a Confluence table as datasource.
Macro “Chart.js pie chart”
The macro creates a pie chart based on a Confluence table and provides the following options:
Height: Height of the macro in pixel (default is 360px)
Pie color: Comma separated list of pie colors (leave empty to use default color palette)
Dataset mode: Defines whether to use rows or columns as dataset; select “Auto” to detect datasets automatically
Macro “Chart.js line chart”
The macro creates a line chart based on a Confluence table and provides the following options:
Height: Height of the macro in pixel (default is 360px)
Line color: Comma separated list of line colors (leave empty to use default color palette)
Line fill: Comma separated fill status (use “true” or “false”)
Y-axis begin at zero: Check to start the y-axis at 0
Dataset mode: Defines whether to use rows or columns as dataset; select “Auto” to detect datasets automatically
Macro “Chart.js bar chart”
The macro creates a bar chart based on a Confluence table and provides the following options:
Height: Height of the macro in pixel (default is 360px)
Bar color: Comma separated list of bar colors (leave empty to use default color palette)
Bar fill: Comma separated fill status (use “true” or “false”)
Y-axis begin at zero: Check to start the y-axis at 0
Dataset mode: Defines whether to use rows or columns as dataset; select “Auto” to detect datasets automatically
Macro “Chart.js radar chart”
Height: Height of the macro in pixel (default is 360px)
Line color: Comma separated list of line colors (leave empty to use default color palette)
Dataset mode: Defines whether to use rows or columns as dataset; select “Auto” to detect datasets automatically