props name is suffixed with * if it's required
| Type | Array of { epoch, quote } or { epoch, open, high, low, close }, all keys are number |
| Default | [] |
Description
- Data to be shown on chart, allow 2 different data structure, need to be in sync with
typeproperty
| Type | One of line, area, candlestick, ohlc |
| Default | 'area' |
Description
areaandlinerequire data structre of { epoch, quote },- 'candlestick` and 'ohlc' require data structure of { epoch, open, high, low, close }
| Type | Object, most properties can be found https://developers.binary.com/api/#proposal_open_contract |
| Default | N/A |
Details of contract object
| Key | type | description |
|---|---|---|
| barrier | number | value of 1st barrier |
| barrier_count | number | number of barriers |
| low_barrier | number | lower barrier of contract |
| high_barrier | number | higher barrier of contract |
| barrierType | {'absolute', 'relative', 'digit'} | This is not obtained from api, user need to supply manually to indicate types of barrier, default to relative |
| contract_type | string | Eg. CALL, PUT, TOUCHONE, EXPIRYMISS etc, affect how barriers is interpreted and rendered |
| date_expiry | epoch | a straight line will be render on this timestamp as Expiry Time |
| date_start | epoch | a straight line will be render on this timestamp as Start Time |
| entry_tick_time | epoch | a straight line will be render on this timestamp as Entry Spot Time |
| exit_tick_time | epoch | a straight line will be render on this timestamp as Exit Spot Time |
| purchase_time | epoch | a straight line will be render on this timestamp if it differ from both start_time and entry_tick_time |
| sell_time | epoch | a straight line will be render on this timestamp as Exit Spot Time in case where contract is sold before expire |
Description
- barrier exist when contract require only 1 barrier, eg. RISE/FALL, TOUCH/NOTOUCH
- low_barrier and high_barrier is used when contract require 2 barriers, eg. ENDS IN, STAYS OUTSIDE
- chart will use contract to extract barriers, if contract is absent, it will try extract barriers from
tradeproperties
| Type | Object, most properties can be found https://developers.binary.com/api/#proposal |
| Default | N/A |
Details of trade object
| Key | type | description |
|---|---|---|
| barrier | number | value of 1st barrier |
| barrier2 | number | value of 2nd barrier (if any) |
| barrierType | {'absolute', 'relative', 'digit'} | This is not obtained from api, user need to supply manually to indicate types of barrier, default to relative |
Description:
- barrier2 refers to low_barrier in contract
- barrier refer to high_barrier in contract
| Type | Array of { type: 'event name', handler: (chart) => void } |
| Default | [] |
Description
This prop allow user to interact with chart imperatively, by emitting Event to the DOM containing the chart.
Example
const eventsList = [{ type: 'print', handler: chart => console.log(chart.options) }];
ReactDOM.render(
<BinaryChart events={eventsList} />, document.getElementById('chart')
);
document.getElementById('chart').dispatchEvent(new Event('print'));
// this will print the chart options in console
| Type | string |
| Default | N/A |
| Description |
The id of chart component in DOM, it is useful in case you need to access dom directly, also to be used together with events It only refers to the chart component, does not include toolbars
| Type | Function with signature (start: Epoch, end: Epoch, type: 'ticks' |
| Default | () => Promise.resolve() |
Description
This is a method that supposed to fetch data from data source, it will be invoked when
- changing to a chart type that require different data, eg from line chart to candlestick chart
- change interval, as 1 minute data and 5 minute data is different
- when shifting to end of existing old data using Zoom Control, chart will interpret user want to view older data that is not available, thus call
getDatato fetch more
| Type | boolean |
| Default | false |
Description
When set to true, chart will ignore ticks property and show Data not available
| Type | Function, signature: (chartType: string) => void |
| Default | N/A |
| Description |
Callback function that get called whenever user change chart type through the ChartTypePicker control, typical usage is to change chart type
| Type | string |
| Default | N/A |
| Description |
Name of asset/underlying/symbol, will be show on tooltip when hover
| Type | boolean |
| Default | true |
| Description |
if true, will allow user to change chart type to candlestick or OHLC bar
| Type | number |
| Default | 0 |
| Description |
This affect decimal places of data to be shown
| Type | can only be either 'fixed' or 'dynamic' |
| Default | 'fixed' |
| Description |
- when set to
fixed, chart appear tomovetoward Right Hand Side when new data is added - when set to
dynamic, chart appear toexpandtoward Right Hand Side when new data is added
| Type | string |
| Default | N/A |
| Description |
Class name for the whole container dom, including toolbar, used to allow styling
| Type | boolean |
| Default | false |
| Description |
Set to true to hide TimeFramePicker which appear at the bottom of chart
| Type | boolean |
| Default | false |
| Description |
Set to true to hide IntervalPicker
| Type | boolean |
| Default | false |
| Description |
Set to true to hide the whole toolbar, which appear on top of the chart
| Type | boolean |
| Default | false |
| Description |
Set to true to hide the zoom control, which appear inside the chart when mouse hover