binary-charts
v9.2.7
Published
Binary trade and contract visualisation library, written in React
Downloads
661
Readme
Binary Charts
Install by running:
npm install binary-charts --save
Or by including the file via CDN and a script tag:
<script src="https://unpkg.com/[email protected]/lib/binary-charts.js"></script>
See Demos
npm install
npm start
open localhost:9001
Build
To build the project:
npm install
npm run compile
To run unit tests:
npm test
For live rebuild during development:
webpack --watch
open example/index.html
Usage
Install in your project:
npm i binary-charts --save
Render the component and pass ticks array to visualize:
<BinaryCharts ticks={ticks} />
Ticks array is in a format [{ epoch, quote }]. Like:
var ticks = [
{ epoch: 123, quote: 95.4 },
{ epoch: 124, quote: 95.3 },
{ epoch: 125, quote: 95.6 }
];
API
| Props | Default | Description |
-------|---------|-------------
contract | N/A | description of a bought contract, check response of https://developers.binary.com/api/#proposal_open_contract
id | N/A | id of dom element
noData | false | if true, indicate no data for chart, message 'Data not availablewill be shown
pipSize | 0 | decimal places of data to be shown, if zero, 9.02 will be shown as 9
onRangeChange | N/A | function with signature
(count, type) => void, called when user clicked one of the range selector buttons, useful when library client want to load more data when user click those buttons
showAllRangeSelector | true | enable all rangeSelector button if true, disable out of range button if false, eg. If all your data is within 1 hour, the 1D button will be disabled
symbol | N/A | string represent symbol of data, eg. 'R_100'
shiftMode | 'fixed' | only allowed
fixedor
dynamic, if
fixed, no of data shown will be fix when new data is added, if
dynamic, the scroller will expand when new data added
ticks | [ ] | data for charts, can be in ticks structure or ohlc structure, check below for data shape
theme | 'light' |
lightor 'dark'
type | 'area' | can be either
areaor
candlestick, defines chart type
onTypeChange | N/A | function with signature
(type) => void`, called when user change chart type WIP
trade | N/A | an object describe proposal that user might want to buy, check request of https://developers.binary.com/api/#proposal
trading times | N/A | trading times of symbol, check https://developers.binary.com/api/#trading_times
Ticks data structure
TICKS:
[
{
epoch: number,
quote: number
},
...
]
OHLC:
[
{
epoch: number,
open: number,
high: number,
low: number,
close: number,
},
...
]
Contract visualization
The component can optionally display the trade parameters or contract already bought.
<BinaryCharts ticks={ticks} trade={trade} />
or
<BinaryCharts ticks={ticks} contract={contract} />
Trade and contract properties have the exact format as accepted or returned by the API.
Trading Times
You can optionally provide a trading times object and the Chart will display plot lines visialising open, close and settlement times.
Dynamic data
Dynamically loading more data when needed by the chart will be available soon.
Usage outside React projects
The project is currently lightly dependent on React, but will soon be usable without it. Until then, you can integrate a React component in non-React project like this: