DojiChart

Features

Multiple chart panels: A DojiChart instance comprises multiple chart panels, for example, a separate volume panel can be associated with a price chart panel.
Layers: A chart panel has layers, for example a candlestick layer and moving average layer.
Responsive: Charts are responsive, such that they expand or contract to fit their container's width.
Scaling and sizing: The width of candlesticks and their intervals can be changed on the fly - otherwise known as zoom.
Scrolling: Charts can be scrolled forward and backward, either one bar at a time or by a specific number of time intervals.
Grids and labels: Each chart panel can optionally have value and time grid lines and labels, which can be set to appear at specified granularity or automatically.
Crosshair: A crosshair, implemented as a layer is rendered over each chart panel and reacts to mousemove events.
Events: Click events on candlesticks is implemented and can be extended to cover other interaction events, such as touch and drag.

Usage

Include CSS and JavaScript:

<link rel="stylesheet" href="dojichart.min.css">
<script type="text/javascript" src="dojichart.min.js"></script>

Add some markup to page's body (where you'd like the chart to be rendered):

<div class="dojichart" id="my-chart">
  <div class="region" data-name="price"></div>
</div>

var myChart = new DojiChart('my-chart', {
  width: 700,
  fieldMap: {
    time: 't',
    open: 'o',
    high: 'h',
    low: 'l',
    close: 'c',
  }
});

// Create a chart panel in the region named 'price'
var pricePanel = new DojiChart.panel.TimeValuePanel({
  primaryLayer: new DojiChart.layer.CandleLayer(),
  height: 200
});

myChart.addComponent('price', pricePanel);

// Dummy data
var priceData = [
  {'t':'2015-11-11T17:25:00.000000Z','o':4672.3,'h':4675.3,'l':4671.0,'c':4671.4},
  {'t':'2015-11-11T17:30:00.000000Z','o':4671.5,'h':4675.1,'l':4671.3,'c':4674.5},
  {'t':'2015-11-11T17:35:00.000000Z','o':4674.5,'h':4678.6,'l':4674.5,'c':4676.2},
  {'t':'2015-11-11T17:40:00.000000Z','o':4676.0,'h':4677.3,'l':4674.5,'c':4674.9},
  {'t':"2015-11-11T17:45:00.000000Z","o":4674.7,"h":4676.2,"l":4673.2,"c":4673.3}
];

// Load data
myChart.loadData(priceData, 'NASDAQ', 'M5');

Licence

DojiChart is made available the GNU General Public License version 3 (GPLv3). You are required to release the source code of any program that you distribute that uses DojiChart. If you would like to use the DojiChart source as part of commercial software or do not want disclose your source code, please get in contact.

DojiChart - a JavaScript library for rendering candlestick charts using the canvas element

Features

Usage

Download

Licence

Contact