Polar Area Chart

Screenshot

Description

The Chart.js Polar Area Chart macro can only show one data set. Each value is shown as a slice-like area from a polar view with a different color.

Adding the Macro

  1. Edit your page.

  2. Select “+” => Other macros

  3. Type in “Chart.js” in the Search box

  4. Select the “Chart.js Polar Area Chart” macro

  5. Enter and select the options of the macro

  6. Click Insert

  7. Put your data table in the macro body

  8. Save the page

Macro Options

OptionDescription

Chart ID

Enter a unique identifier for this chart on your page. If you use more than one Chart.js chart on your page, make sure that each one of them has a different Chart ID. Use no blanks or special characters.

Show Title

Switch on or off the display of the chart title. If switched on (default), the title is shown above the chart’s matrix as shown in the screenshot above: “My Chart.js Bubble Chart”.

Chart Title

Enter the title of the chart. You can chose to display it or not by the “Show Title” checkbox.

Chart Width

This value defines the width of the chart block. The chart itself will adjust to this size. You can enter a pixel (e.g. “500px”) or a percentage (e.g. “100%”) value. A pixel value will make the block exactly that size, a percentage value refers to the parent block, e.g. a Confluence page section. The default is “500px”. Enter the value without the quotes.

Chart Border Width

The chart can have a border if you want so. Enter the size of it here in pixel. Enter just the number without the “px”, e.g. “1”. The default is “1”. Enter the value without the quotes.

Chart Border Color

If you chose to display a border around the chart, you can enter the color of it here. Enter the hex value of the color starting with a “#”, e.g. “#d7d7d7”. Enter the value without the quotes.

Aspect Ratio

With this option switched on, you can force the height to be the same as the width of the chart (square display).

Show Legend

Select whether you want to show the legend or not.

Legend Position

Select where to show the legend.

Show Tooltips

Select whether you want to show the tooltips when hovering a bubble or not.

Show Data Table

Select whether you want to show the data table of the macro body in the page view or not.

Data Table

The macro requires a table with your data in the macro body.

Format

Series<area1-label><area2-label><area3-label><area4-label>

Color

Color of area 1

Color of area 2

Color of area 3

Color of area 4

Series

Value of area 1

Value of area 2

Value of area 3

Value of area 4

Example

SeriesApplesBananasMangosOrangesCherries

Color

random

orange

darksalmon

dodgerblue

firebrick

Series

12

14

19

7

8

Header Row

The table must have a header row. The first cell is ignored. The rest are used to label each slice of the chart.

Color Row

The table must have a second row where the macro expects to find the colors of each slice. The first cell is ignored.

Value Row

The polar area chart can only show one data set. The third row contains it. The label is in the first column and its values in the subsequent columns.

Last updated