Candle chartJSON used as input for Candle chart rendering consists of multiple elements. Basic structure| Code Block |
|---|
{
"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. | Name | Description | Example |
|---|
mouse | Mouse sensitivity | 2 | shadow | [true, false] | true | stroke | [0, 1] | 1 | colour | Default font color for tooltips | #202020 | background | Default background for tooltips. | "#ffffff" |
| |
Example | Code Block |
|---|
{
"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 | Name | Description | Example |
|---|
colour | Color of the labels | #4e4e4e | labels | Array of labels to display. | [ "Austria", "Canada", "France", "Germany" ] |
| |
Example: | Code Block |
|---|
"x_axis": {
"colour": "#c7c7c7",
"grid-colour": "#c7c7c7",
"labels": {
"colour": "#4e4e4e",
"labels": [ "Austria", "Canada", "France", "Germany" ]
}
}, |
"y_axis" contentY 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 | Name | Description | Example |
|---|
colour | Color of the labels | #4e4e4e | labels | Array of label and values | [ { "text": "0 USD", "y": 0 }, { "text": "100.000 USD", "y": 100000 } ] |
| |
Example: | Code Block |
|---|
"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" contentEach 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 | | Name | Description | Example |
|---|
high | Numerical value specifying the high position of a vertical line | 1000 | top | Numerical value specifying the top position of a bar | 850 | bottom | Numerical value specifying the bottom position of a bar | 750 | low | Numerical value specifying the low position of a vertical line | 400 | tip | Tooltip text to display on mouse hover on bar (optional) | This is bar tooltip | tipHigh | Tooltip text to display on mouse hover on vertical line above the bar (optional) | This is high line tooltip | tipLow | Tooltip text to display on mouse hover on vertical line below the bar (optional) | This is low line tooltip |
| |
| Code Block |
|---|
"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| Attachments |
|---|
| upload | false |
|---|
| old | false |
|---|
| sortBy | name |
|---|
|
|