Installation

As any app for Confluence Cloud, you can install the app via the Confluence admin menu.

1. Log into your Confluence instance as an admin.

2. Click on “Apps > Manage apps” in the header menu.

3. Click on “Find new apps” on the right navigation.

4. Search for “Chart.js Diagrams for Confluence Cloud” and select it.

5. 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

• Minimum value: Minimum value of the radar chart (gets overridden if data source contains lower values)

• Maximum value: Maximum value of the radar chart (gets overridden if data source contains higher values)