Candle chart
JSON used as input for Candle chart rendering consists of multiple elements.
Basic structure
{ "x_axis": { "labels": { "labels": [ ... ] } } "y_axis": { "labels": { "labels": [ ... ] } } "elements": [ { "type": "candle", "values": [ ... ] } ] }
Common elements
Name | Description | Example | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
chartId | Chart view identifier. Refer to REST API. | chart_3-FDEp6Q41fb_s3fwVc7F9H | ||||||||||||||||||
bg_color | Defines the color of the background for the entire chart | #e5e5e5 | ||||||||||||||||||
is_decimal_separator_comma | Determines whether to use comma as decimal separator. [0, 1] | 1 | ||||||||||||||||||
is_thousand_separator_disabled | Determines whether to use the thousands separator or not. [0, 1] | 1 | ||||||||||||||||||
tooltip | Defines the basic tooltip settings for the entire chart.
|
Example
{ "chartId": "chart_3-FDEp6Q41fb_s3fwVc7F9H", "bg_colour": "#e5e5e5", "is_decimal_separator_comma": 1, "is_thousand_separator_disabled": 1, "tooltip": { "mouse": "2", "shadow": true, "stroke": 1, "colour": "#202020", "background": "#ffffff" }, "options": {} }
"x_axis" content
Name | Description | Example | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
colour | Color of the axis label | #c7c7c7 | |||||||||
grid-colour | Color of the x-axis grid (horizontal) | #c7c7c7 | |||||||||
labels | Nested object defining the axis labels
|
Example:
"x_axis": { "colour": "#c7c7c7", "grid-colour": "#c7c7c7", "labels": { "colour": "#4e4e4e", "labels": [ "Austria", "Canada", "France", "Germany" ] } },
"y_axis" content
Y axis is defined by min and max value, size of one step (steps) and labels. Each label consists of value on Y axis (y) and displayed text. You can specify also colour and grid-colour for Y axis.
Name | Description | Example | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
colour | Color of the axis label | #e9e9e9 | |||||||||
grid-colour | Color of the y-axis grid (vertical) | #e9e9e9 | |||||||||
steps | Size of the steps of the axis | 100000 | |||||||||
min | Minimal value displayed on the axis | 0 | |||||||||
max | Maximal value displayed on the axis | 800000 | |||||||||
labels | Nested object defining the axis labels
|
Example:
"y_axis": { "colour": "#e9e9e9", "grid-colour": "#e9e9e9", "steps": 100000, "min": 0, "max": 800000, "labels": { "colour": "#4e4e4e", "labels": [ { "text": "0 USD", "y": 0 }, { "text": "100.000 USD", "y": 100000 }, { "text": "200.000 USD", "y": 200000 }, { "text": "300.000 USD", "y": 300000 }, { "text": "400.000 USD", "y": 400000 }, { "text": "500.000 USD", "y": 500000 }, { "text": "600.000 USD", "y": 600000 }, { "text": "700.000 USD", "y": 700000 }, { "text": "800.000 USD", "y": 800000 } ] } }
"elements" content
Each object in array elements describe one chart element. In example below we have only one element with text Revenue, that has type candle and contains array with 4 values. Each value object consists of numbers high, top, bottom, low and tooltips tip, tipHigh, tipLow. Colour, positiveColour and negativeColour is specified for this element.
Name | Description | Example | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
type | Type of the chart. For candle chart, the value is "candle" | candle | ||||||||||||||||||||||||
text | Name of the chart | |||||||||||||||||||||||||
colour | Default color used for candles | |||||||||||||||||||||||||
positiveColour | Color used for positive candles. Positive candle is a value where "top" is greater then "bottom". (optional) | |||||||||||||||||||||||||
negativeColour | Color used for negative candles. Negative candle is a value where "top" is lower then "bottom". (optional) | |||||||||||||||||||||||||
values |
|
"elements": [ { "type": "candle", "text": "Revenue", "colour": "#4379bd", "positiveColour": "#00ff00", "negativeColour": "#ff0000", "values": [ { "high": 500000, "top": 444835.123456789, "bottom": 400000, "low": 300000, "tip": "Austria\n444.835 - 400.000", "tipHigh": "Austria\n500.000", "tipLow": "Austria\n300.000" }, { "high": 880000, "top": 730974,, "bottom": 680000, "low": 480000, "tip": "Canada\n730.974 - 680.000" }, { "high": 660000, "top": 546650, "bottom": 500000, "low": 480000, "tip": "France\n546.650 - 500.000" }, { "high": 770000, "top": 643782.34, "bottom": 640000, "low": 620000, "tip": "Germany\n643.782 - 640.000" } ] } ]
Examples