Candlestick and Volume Chart
A canvas based candlestick chart implemented as CanJS component. Built with StealJS.
To try out the demo open the following file in browser: /demo/demo.html
.
API
Main parameters:
chart-data
, an array of data (see demo data/demo/data-1.json
);chart-height
, a number, a height of the chart in px;candlestick-size
, is updated by the Candlestick Size control. Bind to this property to load data for different candlestick sizes.
Customization parameters:
colors
, an object:borderColor
, default '#d3d3d3';textColor
, default '#333333';lineColor
, default '#F2F2F2';volumeColor
, default '#cccccc';greenColor
, default '#32B576';redColor
, default '#EC2F39';preview
, default '#777777'.
dateFormat
, format of the date for X-axis,moment
package is used, defaultMMMM D
.timeFormat
, format of the time for X-axis,moment
package is used, defaulthh:mm A
.zoomStart
, a float from 0 to 1, initial value for the left border of the preview zoom window, default0.9
.zoomEnd
, a float from 0 to 1, initial value for the right border of the preview zoom window, default1.0
.
The controls (Zoom and Candlestick Size) and the mouse-hover meta-data can be customized with CSS.
Usage
Your page template can look like this:
- Note: this package is built with StealJS and uses
stache
template engine which is default for CanJS stack. *
Given data:
Your view model can look like:
;; // Define your page viewmodel:const VM = DefineMap; // Instantiate your view model:const vm = candlestickSize: 7200 ; // Render your template with VM:const template = stache;const frag = ;documentbody;