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


Multiple chart panels
A DojiChart instance comprises multiple chart panels, for example, a separate volume panel can be associated with a price chart panel.
A chart panel has layers, for example a candlestick layer and moving average layer.
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.
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.
A crosshair, implemented as a layer is rendered over each chart panel and reacts to mousemove events.
Click events on candlesticks is implemented and can be extended to cover other interaction events, such as touch and drag.


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>
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 = [

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



npm install dojichart






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.


Please complete the I'm not a robot test