Candlestick Chart With Technical Indicators – DojiChart

Category: Chart & Graph , Javascript | July 23, 2019
Author: dojichart
Views Total: 459 views
Official Page: Go to website
Last Update: July 23, 2019
License: GPL-3.0


Candlestick Chart With Technical Indicators – DojiChart


DojiChart is a pure JavaScript chart library that renders responsive and customizable candlestick charts with technical indicators for financial websites to describe price movements/trends of a security, derivative, or currency.

Basic usage:

Install and download the package.

$ npm install dojichart --save

Include the dojichart.min.js and dojichart.min.css on the webpage.

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

Or load the necessary files from a CDN.

<link rel="stylesheet" href="[email protected]/dist/dojichart.min.css" />
<script src="[email protected]/dist/dojichart.min.js"></script>

Insert regions to the DojiChart container.

<div class="dojichart" id="myChart">
  <div class="region" data-name="timelabels"></div>
  <div class="region" data-name="price"></div>
  <div class="region" data-name="volume"></div>

Initialize the DojiChart instance with options.

var dojichart = new DojiChart.core.Chart(document.getElementById("myChart"), {
    fieldMap: {
      time: "time",
      open: "openBid",
      high: "highBid",
      low: "lowBid",
      close: "closeBid",
      volume: "volume"
    crosshair: true

Create panels and add components to the chart based on the data-name attribute.

// Candlestick layer
var candle_layer = new DojiChart.layer.CandleLayer({});

// Price chart panel
var price_chart_panel = new DojiChart.panel.TimeValuePanel({
  primaryLayer: candle_layer,
  height: 250,
  grid: true

dojichart.addComponent("price", price_chart_panel);

// Moving average
var sma_layer = new DojiChart.layer.indicator.SimpleMovingAverageLayer({
  period: 50

// Time labels (at top of chart)
var time_labels_panel = new DojiChart.panel.TimeLabelsPanel();
dojichart.addComponent("timelabels", time_labels_panel);

// Volume
var volume_layer = new DojiChart.layer.indicator.VolumeLayer({
  barColor: "#3377FF",
  barWidth: 5

var volume_chart_panel = new DojiChart.panel.TimeValuePanel({
  height: 100,
  primaryLayer: volume_layer
dojichart.addComponent("volume", volume_chart_panel);

Load data you specify.

dojichart.loadData(raw_data, symbol, granularity, do_draw);

All possible options to customize the candlestick chart.

You Might Be Interested In:

Leave a Reply