plotly.js

The open source JavaScript graphing library that powers plotly

  • Open Source.
    These libraries are free forever. Your Pro plan helps keep them top notch.
  • Share Online.
    Share charts, dashboards, Jupyter notebooks, and presentations through our enterprise-grade cloud.
  • Engineering Support.
    Get instant chat support from our awesome engineering team.
Show Sidebar Hide Sidebar
Plotly.js

Candlestick Charts in plotly.js

How to graph D3.js-based candlestick charts in javascript. Examples of candlestick charts.

Please note that the inclusion of the Plotly Finance javascript library is necessary when making candlestick charts.

Click here to view the PlotlyFinance repository.
Click here to view the PlotlyFinance source code.
var fig = PlotlyFinance.createCandlestick(
    {
        open: [33.0, 33.3, 33.5, 33.0, 34.1],
        high: [33.1, 33.3, 33.6, 33.2, 34.8],
        low: [32.7, 32.7, 32.8, 32.6, 32.8],
        close: [33.0, 32.9, 33.3, 33.1, 33.1],
        dates: [
            [2013,10,10] ,[2013,11,10], [2013,12,10], [2014,1,10], [2014,2,10]
        ].map(function(d) { return new Date(d[0], d[1]-1, d[2]); })
    }
);
Plotly.newPlot('myDiv', fig.data, fig.layout);
var fig = PlotlyFinance.createCandlestick(
    {
        open: [33.0, 33.3, 33.5, 33.0, 34.1],
        high: [33.1, 33.3, 33.6, 33.2, 34.8],
        low: [32.7, 32.7, 32.8, 32.6, 32.8],
        close: [33.0, 32.9, 33.3, 33.1, 33.1],
        dates: [
            [2013,10,10] ,[2013,11,10], [2013,12,10], [2014,1,10], [2014,2,10]
        ].map(function(d) { return new Date(d[0], d[1]-1, d[2]); })
    }
);

fig.layout.title = 'Figure Title';

fig.layout.annotations = [{
  text: "Figure Annotation",
  x: '2013-11-15',
  y: 1.02,
  xref: 'x',
  yref: 'paper',
  showarrow: false,
  xanchor: 'left'}];

fig.layout.shapes = [{
  x0: '2013-11-15',
  x1: '2013-11-15',
  type: 'line',
  y0: 0,
  y1: 1,
  xref: 'x',
  yref: 'paper',
  line: {
    color: 'rgb(40,40,40)',
    width: 0.5
  }
}];

fig.layout.xaxis.title = 'Dates';

Plotly.newPlot('myDiv', fig.data, fig.layout);
function makeplot() {
  Plotly.d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/candlestick_dataset_2007_2009.csv", function(data){ processData(data) } );
};

function processData(allRows) {

  var data_open = [], data_close = [], data_high = [], data_low = [], dates = [];

  for (var i=0; i < allRows.length; i++) {
    row = allRows[i];
	data_close.push(parseFloat(row['close']));
	data_high.push(parseFloat(row['high']));
	data_low.push(parseFloat(row['low']));	 
	data_open.push(parseFloat(row['open']));
  }
  makePlotly( data_open, data_close, data_high, data_low );	
}


function makePlotly( data_open, data_close, data_high, data_low ){
	var data_dates = getAllDays('2007-10-01', '2009-04-01');
	
	var fig = PlotlyFinance.createCandlestick({
	                                          open: data_open,
	                                          high: data_high,
	                                          low: data_low,
	                                          close: data_close,
	                                          dates: data_dates
                            });

Plotly.newPlot('myDiv', fig.data, fig.layout);
};

// Utility Function to generate all days
function getAllDays(start, end) {
    var s = new Date(start);
    var e = new Date(end);
    var a = [];
	
    while(s < e) {
        a.push(s);
        s = new Date(s.setDate(
            s.getDate() + 1
        ))
    }

    return a;
};

makeplot();
function makeplot() {
  Plotly.d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/candlestick_dataset_2007_2009.csv", function(data){ processData(data) } );
};

function processData(allRows) {
  var data_open = [], data_close = [], data_high = [], data_low = [], dates = [];
  for (var i=0; i < allRows.length; i++) {
    row = allRows[i];
	 data_close.push(parseFloat(row['close']));
	 data_high.push(parseFloat(row['high']));
	 data_low.push(parseFloat(row['low']));	 
	 data_open.push(parseFloat(row['open']));
  }
  makePlotly( data_open, data_close, data_high, data_low );	
}


function makePlotly( data_open, data_close, data_high, data_low ){
	var data_dates = getAllDays('2007-10-01', '2009-04-01');
	
	var fig = PlotlyFinance.createCandlestick({
	                                          open: data_open,
	                                          high: data_high,
	                                          low: data_low,
	                                          close: data_close,
	                                          dates: data_dates
                            });

    fig.layout.title = 'The Great Recession';

    fig.layout.annotations = [
                 {
                     text: "Official start of the recession",
                     x: '2007-12-01',
                     y: 0.05,
                     xref: 'x',
                     yref: 'paper',
                     showarrow: false,
                     xanchor: 'left'
                 },
                 {
                     text: "AAPL Stock",
                     x: '-0.05',
                     y: 0.5,
                     xref: 'paper',
                     yref: 'paper',
                     font:{
                           size: 18
                          },
                     showarrow: false,
                     xanchor: 'right',
                     textangle: 270
                 }
                ];

    fig.layout.shapes = [{
                      x0: '2007-12-01',
                      x1: '2007-12-01',
                      type: 'line',
                      y0: 0,
                      y1: 1,
                      xref: 'x',
                      yref: 'paper'  ,
                      line: {
                            color: 'rgb(30,30,30)',
                            width: 1
                       }
                    }
                 ];

    Plotly.newPlot('myDiv', fig.data, fig.layout);
};

// Utility Function to generate all days
function getAllDays(start, end) {
    var s = new Date(start);
    var e = new Date(end);
    var a = [];
	
    while(s < e) {
        a.push(s);
        s = new Date(s.setDate(
            s.getDate() + 1
        ))
    }

    return a;
};

makeplot();

plotly.js runs on all SVG-compatible browsers

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to our Premium or Enterprise plans.