Bar Chart

Screenshot

Description

The Chart.js Bar Chart macro can show several data sets, each of them as either bars or lines.

Adding the Macro

  1. 1.
    Edit your page.
  2. 2.
    Select “+” => Other macros
  3. 3.
    Type in “Chart.js” in the Search box
  4. 4.
    Select the “Chart.js Bar Chart” macro
  5. 5.
    Enter and select the options of the macro
  6. 6.
    Click Insert
  7. 7.
    Put your data table in the macro body
  8. 8.
    Save the page

Macro Options

Option
Description
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.
Bar Border Width
Enter the size of the bar border width here in pixel. Enter just the number without the “px”, e.g. “1”. The default is “1”. Enter the value without the quotes.
Bar Hover Border Width
When you hover a bar with your mouse its border width can be changed in size with this value. Enter the size of it here in pixel. Enter just the number without the “px”, e.g. “2”. The default is “2”. Enter the value without the quotes.
Line Background
When you use a line instead of bars for a series, the area below the line will have a background color when you tick this option.
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.
Stack Bars
Select whether to stack the bars, i.e showing one bar with sections instead of several bars next to each other.
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. It needs to follow a certain format. Here is an example used for the above screenshot:
Series
Type
Color
Apples
Oranges
Bananas
Mangos
Grapes
Maximum
bar
maroon
19
29
40
34
24
Minimum
line
blue
10
12
20
14
4

Header Row

The table must have a header row. The first three cells are ignored. The rest are used to label each bar of the chart.

Rows and Columns

Each row describes a data series. The name of it, the chart type of it, the color of it and its values.
Series
Type
Color
Apples
Oranges
The name of this series
The chart type of this series: ‘bar’ or ‘line’
The color of this series. Use ‘random’ or one of the web colors.
The first value (its label is taken from the header row)
The second value (its label is taken from the header row)