Skip to content
Chart library for
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook Fix interval initial state and data type change (#176) Jan 3, 2017
.flowconfig Refactor and simplify, use Highcharts from npm again Sep 7, 2016
.gitignore Add RSI and MACD (#179) Jan 20, 2017
.travis.yml add fast_finish (#147) Sep 26, 2016
LICENSE Add MIT license Mar 22, 2016 Replace with (#123) Sep 7, 2016
non-react-example.html Replace with (#123) Sep 7, 2016
package.json v9.2.7 Oct 23, 2017

Binary Charts

Build Status Coverage Status Code Climate


Install by running:

npm install binary-charts --save

Or by including the file via CDN and a script tag:

<script src=""></script>

See Demos

npm install
npm start
open localhost:9001


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


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 }


Props Default Description
contract N/A description of a bought contract, check response of
id N/A id of dom element
noData false if true, indicate no data for chart, message 'Data not available` will 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 fixed or 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' light or 'dark'
type 'area' can be either area or 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
trading times N/A trading times of symbol, check

Ticks data structure


        epoch: number,
        quote: number


        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} />


<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:

React components as jQuery plugins

Integrating React.js into Existing jQuery Web Applications

You can’t perform that action at this time.