Skip to main content
Version: 8.1

XY Chart Example - Candlestick Chart

This example demonstrates how to configure a candlestick chart. The candlestick chart needs five keys per entry on the chart: a key to represent the date of the entry and four keys that make up the candlestick. These four keys are called open, close, high, and low. These dedicated key properties are visible under the series when the render selection is set to candlestick, and therefore this chart does not require that the keys under dataSources use the exact naming conventions as shown on this page.

Configure a Candlestick Chart

  1. Create an XY chart component and select it.

  2. Copy the JSON content below, and paste it onto the chart component's dataSources.example property.

    [
    {
    "close": 6,
    "date": "2021-8-12 15:37:19",
    "high": 7,
    "low": 2,
    "open": 5
    },
    {
    "close": 7,
    "date": "2021-8-13 15:37:19",
    "high": 9,
    "low": 5,
    "open": 6
    },
    {
    "close": 5,
    "date": "2021-8-14 15:37:19",
    "high": 7,
    "low": 4,
    "open": 7
    }
    ]
  3. Remove the legend by setting legend.enabled to false.

  4. Rename xAxes.0.name to dateAxis.

  5. Set xAxes.0.label.text to Date, to change the label on the x-axis.

  6. Our chart only needs a single y-axis, so delete yAxes.1.

  7. Set yAxes.0.name to valuation.

  8. Set yAxes.0.label.text to Value.

  9. Delete series.1 since we only need a single series for this example.

  10. Navigate to the series.0.data property and make sure the source is still example from the JSON string pasted in step 2.

  11. Set series.0.data.x to the date key

  12. Set series.0.data.y to the close key.

  13. Set series.0.xAxis to the xAxes: dateAxis.

  14. Set series.0.yAxis to the yAxes: valuation.

  15. Set series.0.render to candlestick.

  16. Expand the now visible candlestick properties and set the open, high, and low keys:

    • series.0.candlestick.open: set x to date and y to open.

    • series.0.candlestick.high: set x to date and y to high.

    • series.0.candlestick.low: set x, to date and y to low.

Your candlestick chart is now ready. Note that the third entry is in red, while the first two are green. This is because that entry's close value is less than it's open value.

Example Configuration

The JSON string below can be used to replicate the example above. Simply copy the contents of the code block and paste it into a container in your Designer.

[
{
"type": "ia.chart.xy",
"version": 0,
"props": {
"legend": {
"enabled": false
},
"xAxes": [
{
"name": "dateAxis",
"label": {
"enabled": true,
"text": "Date",
"color": ""
},
"visible": true,
"tooltip": {
"enabled": true,
"text": "",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"inversed": false,
"render": "date",
"category": {
"break": {
"enabled": false,
"startCategory": "",
"endCategory": "",
"size": 0.05
}
},
"date": {
"baseInterval": {
"enabled": false,
"timeUnit": "hour",
"count": 1,
"skipEmptyPeriods": false
},
"range": {
"max": "",
"min": "",
"useStrict": false
},
"break": {
"enabled": false,
"startDate": "",
"endDate": "",
"size": 0.05
},
"inputFormat": "yyyy-MM-dd kk:mm:ss",
"format": "M/d"
},
"value": {
"range": {
"max": "",
"min": "",
"useStrict": false
},
"logarithmic": false,
"break": {
"enabled": false,
"startValue": 0,
"endValue": 100,
"size": 0.05
},
"format": "#,###.##"
},
"appearance": {
"opposite": false,
"inside": false,
"labels": {
"color": "",
"opacity": 1
},
"grid": {
"color": "",
"opacity": 1,
"dashArray": "",
"minDistance": 60,
"position": 0.5
},
"font": {
"size": "",
"weight": 500
}
}
}
],
"yAxes": [
{
"name": "valuation",
"label": {
"enabled": true,
"text": "Value",
"color": ""
},
"visible": true,
"tooltip": {
"enabled": true,
"text": "",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"inversed": false,
"render": "value",
"category": {
"break": {
"enabled": false,
"startCategory": "",
"endCategory": "",
"size": 0.05
}
},
"date": {
"baseInterval": {
"enabled": false,
"timeUnit": "hour",
"count": 1,
"skipEmptyPeriods": false
},
"range": {
"max": "",
"min": "",
"useStrict": false
},
"break": {
"enabled": false,
"startDate": "",
"endDate": "",
"size": 0.05
},
"inputFormat": "yyyy-MM-dd kk:mm:ss",
"format": "M/d/yyyy HH:mm:ss"
},
"value": {
"range": {
"max": "",
"min": "",
"useStrict": false
},
"logarithmic": false,
"break": {
"enabled": false,
"startValue": 0,
"endValue": 100,
"size": 0.05
},
"format": "#,###.##"
},
"appearance": {
"opposite": false,
"inside": false,
"labels": {
"color": "",
"opacity": 1
},
"grid": {
"color": "",
"opacity": 1,
"dashArray": "",
"minDistance": null,
"position": 0.5
},
"font": {
"size": "",
"weight": 500
}
}
}
],
"series": [
{
"name": "process temp",
"label": {
"text": "Process Temp"
},
"visible": true,
"hiddenInLegend": false,
"defaultState": {
"visible": true
},
"data": {
"source": "example",
"x": "date",
"y": "close"
},
"xAxis": "dateAxis",
"yAxis": "valuation",
"zIndex": 0,
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"render": "candlestick",
"candlestick": {
"open": {
"x": "date",
"y": "open"
},
"high": {
"x": "date",
"y": "high"
},
"low": {
"x": "date",
"y": "low"
},
"appearance": {
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"stacked": false,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"heatRules": {
"enabled": false,
"max": "",
"min": "",
"dataField": ""
}
}
},
"column": {
"open": {
"x": "",
"y": ""
},
"appearance": {
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"stacked": false,
"width": null,
"height": null,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"heatRules": {
"enabled": false,
"max": "",
"min": "",
"dataField": ""
}
}
},
"line": {
"open": {
"x": "",
"y": ""
},
"appearance": {
"connect": true,
"tensionX": 1,
"tensionY": 1,
"minDistance": 0.5,
"stroke": {
"width": 3,
"opacity": 1,
"color": "",
"dashArray": ""
},
"fill": {
"opacity": 0,
"color": ""
},
"bullets": [
{
"enabled": false,
"render": "circle",
"width": 10,
"height": 10,
"label": {
"text": "{value}",
"position": {
"dx": 0,
"dy": 0
}
},
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"rotation": 0,
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
},
"rotation": ""
},
"heatRules": {
"enabled": false,
"max": 100,
"min": 2,
"dataField": ""
}
}
]
}
},
"stepLine": {
"open": {
"x": "",
"y": ""
},
"appearance": {
"connect": true,
"tensionX": 1,
"tensionY": 1,
"minDistance": 0.5,
"stroke": {
"width": 3,
"opacity": 1,
"color": "",
"dashArray": ""
},
"fill": {
"opacity": 0,
"color": ""
},
"bullets": [
{
"enabled": true,
"render": "circle",
"width": 10,
"height": 10,
"label": {
"text": "{value}",
"position": {
"dx": 0,
"dy": 0
}
},
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"rotation": 0,
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
},
"rotation": ""
},
"heatRules": {
"enabled": false,
"max": 100,
"min": 2,
"dataField": ""
}
}
]
}
}
}
],
"dataSources": {
"example": [
{
"close": 6,
"date": "2021-8-12 15:37:19",
"high": 7,
"low": 2,
"open": 5
},
{
"close": 7,
"date": "2021-8-13 15:37:19",
"high": 9,
"low": 5,
"open": 6
},
{
"close": 5,
"date": "2021-8-14 15:37:19",
"high": 7,
"low": 4,
"open": 7
}
]
}
},
"meta": {
"name": "XYChart_0"
},
"position": {
"x": 141,
"y": 103,
"height": 375,
"width": 435
},
"custom": {}
}
]