Comment on page

Chart

Chart component - Abyssale REST API

This element is on invitation only (alpha). Contact us if you would like to have access.
3 types of chart are currently supported:
​Line Chart​
​Horizontal Bar Chart 
​Donut 
Line Chart
Available properties:
Property
Description
data
Array of numbers. Data series of the chart. No labelling, only numeric values.
​
At least 2 numbers are required.
The given data series will automatically be fitted to the chart area drawn in the template. 
Examples:
"data": [ 1, 2, 2, 1, 2, 3, 3, 4, 5, 6, 7, 8, 8, 8, 9, 10, 11, 12, 14, 16, 18, 20, 21, 23, 25, 27 ]
​
​
"data": [ 1, 2, 20, 21, 23, 25, 2, 1, 10 ]
​
​
Horizontal Bar Chart
Available properties:
Property
Description
data
Array of dict. Data series of the chart. 
​
Each item of the array must contain the following keys:
label : Text displayed on the current bar
value : Number value of the current bar
color (optional): Background color of the bar. If this color is not given, one will be picked randomly on the Abyssale side.
At least 1 item in the array is required.
Examples:
"data": [ 
  { "label": "Red", "value": 8, "color": "#FF0000" },
  { "label": "Blue", "value": 7, "color": "#0000FF" },
  { "label": "Green", "value": 5, "color": "#00FF00" },
  { "label": "Yellow", "value": 9, "color": "#FFFF00" },
  { "label": "Pink", "value": 6, "color": "#FFC0CB" }
]
​
​
"data": [ 
  { "label": "Lorem", "value": 2 },
  { "label": "Ipsum", "value": 10 }]
​
​
Donut
Available properties:
Property
Description
data
Array of dict. Data series of the chart. 
​
Each item of the array must contain the following keys:
label : Text displayed on the current bar
value : Number value of the current bar
color (optional): Background color of the donut part. If this color is not given, one will be picked randomly on the Abyssale side.
At least 1 item in the array is required.
Examples:
​
"data": [ 
  { "label": "Red", "value": 8, "color": "#FF0000" },
  { "label": "Blue", "value": 7, "color": "#0000FF" },
  { "label": "Green", "value": 5, "color": "#00FF00" },
  { "label": "Yellow", "value": 9, "color": "#FFFF00" },
  { "label": "Pink", "value": 6, "color": "#FFC0CB" }
]
​
​
"data": [ 
  { "label": "Lorem", "value": 2 },
  { "label": "Ipsum", "value": 10 }]
​
​

Property	Description
`data`	Array of numbers. Data series of the chart. No labelling, only numeric values. At least 2 numbers are required.

Property	Description
`data`	Array of dict. Data series of the chart. Each item of the array must contain the following keys: `label` : Text displayed on the current bar `value` : Number value of the current bar `color` (optional): Background color of the bar. If this color is not given, one will be picked randomly on the Abyssale side. At least 1 item in the array is required.

Property	Description
`data`	Array of dict. Data series of the chart. Each item of the array must contain the following keys: `label` : Text displayed on the current bar `value` : Number value of the current bar `color` (optional): Background color of the donut part. If this color is not given, one will be picked randomly on the Abyssale side. At least 1 item in the array is required.

QR Code

Polling

Last modified 1yr ago

`"data": [ 1, 2, 2, 1, 2, 3, 3, 4, 5, 6, 7, 8, 8, 8, 9, 10, 11, 12, 14, 16, 18, 20, 21, 23, 25, 27 ]`
`"data": [ 1, 2, 20, 21, 23, 25, 2, 1, 10 ]`

`"data": [` `{ "label": "Red", "value": 8, "color": "#FF0000" },` `{ "label": "Blue", "value": 7, "color": "#0000FF" },` `{ "label": "Green", "value": 5, "color": "#00FF00" },` `{ "label": "Yellow", "value": 9, "color": "#FFFF00" },` `{ "label": "Pink", "value": 6, "color": "#FFC0CB" }` `]`
`"data": [` `{ "label": "Lorem", "value": 2 },` `{ "label": "Ipsum", "value": 10 }]`