plotly.js

The open source JavaScript graphing library that powers Plotly

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.

var trace1 = {
  
  x: ['2017-01-04', '2017-01-05', '2017-01-06', '2017-01-09', '2017-01-10', '2017-01-11', '2017-01-12', '2017-01-13', '2017-01-17', '2017-01-18', '2017-01-19', '2017-01-20', '2017-01-23', '2017-01-24', '2017-01-25', '2017-01-26', '2017-01-27', '2017-01-30', '2017-01-31', '2017-02-01', '2017-02-02', '2017-02-03', '2017-02-06', '2017-02-07', '2017-02-08', '2017-02-09', '2017-02-10', '2017-02-13', '2017-02-14', '2017-02-15'], 
  
  close: [116.019997, 116.610001, 117.910004, 118.989998, 119.110001, 119.75, 119.25, 119.040001, 120, 119.989998, 119.779999, 120, 120.080002, 119.970001, 121.879997, 121.940002, 121.949997, 121.629997, 121.349998, 128.75, 128.529999, 129.080002, 130.289993, 131.529999, 132.039993, 132.419998, 132.119995, 133.289993, 135.020004, 135.509995], 
  
  decreasing: {line: {color: '#7F7F7F'}}, 
  
  high: [116.510002, 116.860001, 118.160004, 119.43, 119.379997, 119.93, 119.300003, 119.620003, 120.239998, 120.5, 120.089996, 120.449997, 120.809998, 120.099998, 122.099998, 122.440002, 122.349998, 121.629997, 121.389999, 130.490005, 129.389999, 129.190002, 130.5, 132.089996, 132.220001, 132.449997, 132.940002, 133.820007, 135.089996, 136.270004], 
  
  increasing: {line: {color: '#17BECF'}}, 
  
  line: {color: 'rgba(31,119,180,1)'}, 
  
  low: [115.75, 115.809998, 116.470001, 117.940002, 118.300003, 118.599998, 118.209999, 118.809998, 118.220001, 119.709999, 119.370003, 119.730003, 119.769997, 119.5, 120.279999, 121.599998, 121.599998, 120.660004, 120.620003, 127.010002, 127.779999, 128.160004, 128.899994, 130.449997, 131.220001, 131.119995, 132.050003, 132.75, 133.25, 134.619995], 
  
  open: [115.849998, 115.919998, 116.779999, 117.949997, 118.769997, 118.739998, 118.900002, 119.110001, 118.339996, 120, 119.400002, 120.449997, 120, 119.550003, 120.419998, 121.669998, 122.139999, 120.93, 121.150002, 127.029999, 127.980003, 128.309998, 129.130005, 130.539993, 131.350006, 131.649994, 132.460007, 133.080002, 133.470001, 135.520004], 
  
  type: 'candlestick', 
  xaxis: 'x', 
  yaxis: 'y'
};

var data = [trace1];

var layout = {
  dragmode: 'zoom', 
  margin: {
    r: 10, 
    t: 25, 
    b: 40, 
    l: 60
  }, 
  showlegend: false, 
  xaxis: {
    autorange: true, 
    domain: [0, 1], 
    range: ['2017-01-03 12:00', '2017-02-15 12:00'], 
    rangeslider: {range: ['2017-01-03 12:00', '2017-02-15 12:00']}, 
    title: 'Date', 
    type: 'date'
  }, 
  yaxis: {
    autorange: true, 
    domain: [0, 1], 
    range: [114.609999778, 137.410004222], 
    type: 'linear'
  }
};

Plotly.plot('plotly-div', data, layout);
var trace1 = {
  
  x: ['2017-01-17', '2017-01-18', '2017-01-19', '2017-01-20', '2017-01-23', '2017-01-24', '2017-01-25', '2017-01-26', '2017-01-27', '2017-01-30', '2017-01-31', '2017-02-01', '2017-02-02', '2017-02-03', '2017-02-06', '2017-02-07', '2017-02-08', '2017-02-09', '2017-02-10'], 
  
  close: [120, 119.989998, 119.779999, 120, 120.080002, 119.970001, 121.879997, 121.940002, 121.949997, 121.629997, 121.349998, 128.75, 128.529999, 129.080002, 130.289993, 131.529999, 132.039993, 132.419998, 132.119995], 
  
  decreasing: {line: {color: '#7F7F7F'}}, 
  
  high: [120.239998, 120.5, 120.089996, 120.449997, 120.809998, 120.099998, 122.099998, 122.440002, 122.349998, 121.629997, 121.389999, 130.490005, 129.389999, 129.190002, 130.5, 132.089996, 132.220001, 132.449997, 132.940002], 
  
  increasing: {line: {color: '#17BECF'}}, 
  
  line: {color: 'rgba(31,119,180,1)'}, 
  
  low: [118.220001, 119.709999, 119.370003, 119.730003, 119.769997, 119.5, 120.279999, 121.599998, 121.599998, 120.660004, 120.620003, 127.010002, 127.779999, 128.160004, 128.899994, 130.449997, 131.220001, 131.119995, 132.050003], 
  
  open: [118.339996, 120, 119.400002, 120.449997, 120, 119.550003, 120.419998, 121.669998, 122.139999, 120.93, 121.150002, 127.029999, 127.980003, 128.309998, 129.130005, 130.539993, 131.350006, 131.649994, 132.460007], 
  
  type: 'candlestick', 
  xaxis: 'x', 
  yaxis: 'y'
};

var data = [trace1];

var layout = {
  dragmode: 'zoom', 
  margin: {
    r: 10, 
    t: 25, 
    b: 40, 
    l: 60
  }, 
  showlegend: false, 
  xaxis: {
    autorange: true, 
    rangeslider: {range: ['2017-01-17 12:00', '2017-02-10 12:00']}, 
    title: 'Date', 
    type: 'date'
  }, 
  yaxis: {
    autorange: true, 
    type: 'linear'
  },
  
  annotations: [
    {
      x: '2017-01-31',
      y: 0.9,
      xref: 'x',
      yref: 'paper',
      text: 'largest movement',
      font: {color: 'magenta'},
      showarrow: true,
      xanchor: 'right',
      ax: -20,
      ay: 0
    }
  ],
  
  shapes: [
      {
          type: 'rect',
          xref: 'x',
          yref: 'paper',
          x0: '2017-01-31',
          y0: 0,
          x1: '2017-02-01',
          y1: 1,
          fillcolor: '#d3d3d3',
          opacity: 0.2,
          line: {
              width: 0
          }
      }
    ]
};

Plotly.plot('plotly-div', data, layout);
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv', function(err, rows){
      
function unpack(rows, key) {
  return rows.map(function(row) { 
    return row[key]; 
  });
}
  
var trace = {
  x: unpack(rows, 'Date'), 
  close: unpack(rows, 'AAPL.Close'), 
  high: unpack(rows, 'AAPL.High'),  
  low: unpack(rows, 'AAPL.Low'), 
  open: unpack(rows, 'AAPL.Open'),

  // cutomise colors 
  increasing: {line: {color: 'black'}},
  decreasing: {line: {color: 'red'}},
  
  type: 'candlestick', 
  xaxis: 'x', 
  yaxis: 'y'
};

var data = [trace];
  
var layout = {
  dragmode: 'zoom', 
  showlegend: false, 
  xaxis: { 
    title: 'Date',
   range: ['2016-06-01 12:00', '2017-01-01 12:00']
  }, 
  yaxis: {
    autorange: true, 
  }
};

Plotly.plot('myDiv', data, layout); 
});
var URL = 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.historicaldata%20where%20symbol%20in%20(%22GOOG%22)%20and%20startDate%20%3D%20%222016-01-01%22%20and%20endDate%20%3D%20%222016-09-30%22%0A%09%09&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback='

Plotly.d3.json(URL, (err, resp) => {
  if(err) console.log(err)
  
  var data = formatData(resp)
  
  var layout = {
    title: 'GOOG',
    xaxis: {
      range: [new Date(2016, 8, 1), new Date(2016, 8, 31)].map(toMS),
      rangeselector: {
        x: 0,
        y: 1.2,
        xanchor: 'left',
        font: {size:8},
        buttons: [{
            step: 'month',
            stepmode: 'backward',
            count: 1,
            label: '1 month'
        }, {
            step: 'month',
            stepmode: 'backward',
            count: 6,
            label: '6 months'
        }, {
            step: 'all',
            label: 'All dates'
        }],
      }
    },
    legend: {
      x: 0.5,
      xanchor: 'center',
      y: 1,
      yanchor: 'bottom',
      orientation: 'h'
    }
  }
  
  
  //Plotly.plot('ohlc', data.map(makeOHLC), layout)
  
  Plotly.plot('candlestick', data.map(makeCandlestick), layout)
})

function formatData(resp) {
  var quotes = resp.query.results.quote;
  var hash = {};
  
  quotes.forEach(q => {
    var h = hash[q.Symbol]
    
    if(!h) h = hash[q.Symbol] = makeBlank(q.Symbol)
    
    h.x.push(q.Date)
    h.open.push(q.Open)
    h.high.push(q.High)
    h.low.push(q.Low)
    h.close.push(q.Close)
  })
  
  return Object.keys(hash).map(k => hash[k])
}

makeBlank = (name) => { 
  return {
    name: name,
    x: [], open: [], high: [], low: [], close: []
  }
}  

makeCandlestick = (trace, i) => {
  trace.type = 'candlestick';
  
  return trace
}

toMS = (date) => date.getTime()

plotly.js runs on all SVG-compatible browsers

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.