Screenshot

Description

The Chart.js Bubble Chart macro can show several data sets of bubbles. The bubbles of each data set have a different color, indicated by the legend above the matrix. Each bubble is based on three values, its x-coordinate, its y-coordinate and its radius. A mouse-over tooltip shows these three values and the data set name it belongs to.

Adding the Macro

Edit your page.

Select "+" => Other macros

Type in "Chart.js" in the Search box

Select the "Chart.js Bubble Chart" macro

Enter and select the options of the macro

Click INSERT

Put your data table in the macro body

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.
Bubble Border Width	The bubbles 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.
Bubble Hover Border Width	When you hover a bubble 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.
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. It needs to follow a certain format. Here is an example used for the above screenshoot:

Series	x	y	r	Color
2016	-23	-19	12	maroon
2016	-17	-4	16	maroon
2016	13	-13	13	maroon
2016	-16	16	16	maroon
2017	12	-4	11	blue
2017	-6	19	13	blue
2017	23	12	16	blue
2017	34	14	22	blue
2018	-11	7	9	olive
2018	9	8	10	olive
2018	11	-11	11	olive
2018	16	12	13	olive
2019	6	23	17	teal
2019	-12	-23	6	teal
2019	-4	-21	12	teal
2019	-22	17	14	teal

Header Row

The table must have a header row. It serves a visual purpose only though and the macro will ignore it.

Columns

The table must have at least 5 columns. You can add more if you want for your own purposes but the App will only read the first five and interprete them as follows. Each row represents one bubble.

Series	x	y	r	Color
The data series name of this bubble. All rows for one series must be underneath each other (grouped).	The x-ccordinate of the bubble	The y-ccordinate of the bubble	The radius of the bubble in pixel	The color of the bubble. You can either enter "random" for a random color or one of the web color names.