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

OHLC Charts in plotly.js

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

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

Click here to view the PlotlyFinance repository.
Click here to view the PlotlyFinance source code.
var fig = PlotlyFinance.createOHLC(
    {
      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.createOHLC(
    {
      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);
var fig = PlotlyFinance.createOHLC({
  open: [179.039986, 175.57001299999999, 174.54003, 174.769981, 174.47002800000001, 175.81997900000002, 176.150026, 172.76000200000001, 173.30998799999998, 175.28000600000001, 172.959993, 172.39999399999999, 166.84002699999999, 165.86003099999999, 158.58997199999999, 164.57000199999999, 156.85998500000002, 152.32000199999999, 148.17998700000001, 150.90999600000001, 142.03000600000001, 133.86001999999999, 138.49003200000001, 130.57002399999999, 142.60000600000001, 139.94001200000002, 131.849974, 127.270016, 129.80001999999999, 124.910028, 119.61998700000001, 108.250028, 111.919991, 108.010002, 103.999977, 91.959981999999997, 100.48003, 85.910017000000011, 93.349967000000007, 85.700018999999998, 104.54997, 116.25999099999999, 103.84002700000001],
  high: [179.749989, 177.810011, 177.06996699999999, 176.939978, 175.45002399999998, 177.499977, 176.229975, 174.88002399999999, 175.75999099999999, 176.249989, 173.499966, 173.499966, 168.67997600000001, 167.90998500000001, 162.40000499999999, 164.88996900000001, 159.960016, 154.99000900000001, 152.98996399999999, 150.90999600000001, 147.689989, 142.499977, 138.50997900000002, 135.42997600000001, 144.20000300000001, 140.249966, 135.79999699999999, 130.94998000000001, 134.789974, 129.80001999999999, 119.679976, 114.99998899999999, 112.36000800000001, 108.79001299999999, 106.500028, 98.780011000000002, 101.5, 96.33000899999999, 95.799970000000002, 99.999972, 110.53, 116.39999399999999, 106.999972],
  low: [175.04997399999999, 173.82001299999999, 171.810034, 173.61000799999999, 171.88996900000001, 175.57001299999999, 171.66001699999998, 172.60998500000002, 172.189989, 172.749989, 169.039984, 165.000011, 163.999989, 160.810022, 157.650003, 151.459982, 149.789984, 148.79997399999999, 145.999977, 146.499989, 140.36000799999999, 132.14999399999999, 127.83001499999999, 120.679998, 136.310022, 130.65997300000001, 126.660028, 125.14999399999999, 128.520004, 123.00001100000001, 100.58999900000001, 106.29997, 107.39000800000001, 99.999972, 94.650009999999995, 87.539968000000002, 88.949980000000011, 85.679997999999998, 86.600013000000004, 85.000022999999999, 101.020009, 103.14003100000001, 97.890031000000008],
  close: [175.73996399999999, 175.38996900000001, 173.53000600000001, 175.84000600000002, 174.289984, 176.789974, 172.54999699999999, 173.63996900000001, 174.670019, 173.73999799999999, 169.52999499999999, 166.19001200000002, 166.960016, 161.22000500000001, 160.18002099999998, 157.919996, 151.67998700000001, 151.60998500000002, 152.64998199999999, 148.939978, 140.36000799999999, 139.88002399999999, 127.83001499999999, 134.08997199999999, 140.90999399999998, 131.05000900000002, 126.840006, 128.709982, 131.92997600000001, 128.23999799999999, 105.259979, 113.65998500000001, 109.11998700000001, 100.10000100000001, 97.069979000000004, 98.140003000000007, 89.15997800000001, 89.789979000000002, 88.739981999999998, 96.799993000000001, 110.260007, 104.079992, 97.950018999999998],
  dates: [[2008,08,15], [2008,08,18], [2008,08,19], [2008,08,20], [2008,08,21], [2008,08,22], [2008,08,25], [2008,08,26], [2008,08,27], [2008,08,28], [2008,08,29], [2008,09,02], [2008,09,03], [2008,09,04], [2008,09,05], [2008,09,08], [2008,09,09], [2008,09,10], [2008,09,11], [2008,09,12], [2008,09,15], [2008,09,16], [2008,09,17], [2008,09,18], [2008,09,19], [2008,09,22], [2008,09,23], [2008,09,24], [2008,09,25], [2008,09,26], [2008,09,29], [2008,09,30], [2008,10,01], [2008,10,02], [2008,10,03], [2008,10,06], [2008,10,07], [2008,10,08], [2008,10,09], [2008,10,10], [2008,10,13], [2008,10,14], [2008,10,15]].map(function(d) { return new Date(d[0], d[1]-1, d[2]); })
});

Plotly.newPlot('myDiv', fig.data, fig.layout);
var fig = PlotlyFinance.createOHLC(
  {
    open: [179.039986, 175.57001299999999, 174.54003, 174.769981, 174.47002800000001, 175.81997900000002, 176.150026, 172.76000200000001, 173.30998799999998, 175.28000600000001, 172.959993, 172.39999399999999, 166.84002699999999, 165.86003099999999, 158.58997199999999, 164.57000199999999, 156.85998500000002, 152.32000199999999, 148.17998700000001, 150.90999600000001, 142.03000600000001, 133.86001999999999, 138.49003200000001, 130.57002399999999, 142.60000600000001, 139.94001200000002, 131.849974, 127.270016, 129.80001999999999, 124.910028, 119.61998700000001, 108.250028, 111.919991, 108.010002, 103.999977, 91.959981999999997, 100.48003, 85.910017000000011, 93.349967000000007, 85.700018999999998, 104.54997, 116.25999099999999, 103.84002700000001],
    high: [179.749989, 177.810011, 177.06996699999999, 176.939978, 175.45002399999998, 177.499977, 176.229975, 174.88002399999999, 175.75999099999999, 176.249989, 173.499966, 173.499966, 168.67997600000001, 167.90998500000001, 162.40000499999999, 164.88996900000001, 159.960016, 154.99000900000001, 152.98996399999999, 150.90999600000001, 147.689989, 142.499977, 138.50997900000002, 135.42997600000001, 144.20000300000001, 140.249966, 135.79999699999999, 130.94998000000001, 134.789974, 129.80001999999999, 119.679976, 114.99998899999999, 112.36000800000001, 108.79001299999999, 106.500028, 98.780011000000002, 101.5, 96.33000899999999, 95.799970000000002, 99.999972, 110.53, 116.39999399999999, 106.999972],
    low: [175.04997399999999, 173.82001299999999, 171.810034, 173.61000799999999, 171.88996900000001, 175.57001299999999, 171.66001699999998, 172.60998500000002, 172.189989, 172.749989, 169.039984, 165.000011, 163.999989, 160.810022, 157.650003, 151.459982, 149.789984, 148.79997399999999, 145.999977, 146.499989, 140.36000799999999, 132.14999399999999, 127.83001499999999, 120.679998, 136.310022, 130.65997300000001, 126.660028, 125.14999399999999, 128.520004, 123.00001100000001, 100.58999900000001, 106.29997, 107.39000800000001, 99.999972, 94.650009999999995, 87.539968000000002, 88.949980000000011, 85.679997999999998, 86.600013000000004, 85.000022999999999, 101.020009, 103.14003100000001, 97.890031000000008],
    close: [175.73996399999999, 175.38996900000001, 173.53000600000001, 175.84000600000002, 174.289984, 176.789974, 172.54999699999999, 173.63996900000001, 174.670019, 173.73999799999999, 169.52999499999999, 166.19001200000002, 166.960016, 161.22000500000001, 160.18002099999998, 157.919996, 151.67998700000001, 151.60998500000002, 152.64998199999999, 148.939978, 140.36000799999999, 139.88002399999999, 127.83001499999999, 134.08997199999999, 140.90999399999998, 131.05000900000002, 126.840006, 128.709982, 131.92997600000001, 128.23999799999999, 105.259979, 113.65998500000001, 109.11998700000001, 100.10000100000001, 97.069979000000004, 98.140003000000007, 89.15997800000001, 89.789979000000002, 88.739981999999998, 96.799993000000001, 110.260007, 104.079992, 97.950018999999998],
    dates: [[2008,08,15], [2008,08,18], [2008,08,19], [2008,08,20], [2008,08,21], [2008,08,22], [2008,08,25], [2008,08,26], [2008,08,27], [2008,08,28], [2008,08,29], [2008,09,02], [2008,09,03], [2008,09,04], [2008,09,05], [2008,09,08], [2008,09,09], [2008,09,10], [2008,09,11], [2008,09,12], [2008,09,15], [2008,09,16], [2008,09,17], [2008,09,18], [2008,09,19], [2008,09,22], [2008,09,23], [2008,09,24], [2008,09,25], [2008,09,26], [2008,09,29], [2008,09,30], [2008,10,01], [2008,10,02], [2008,10,03], [2008,10,06], [2008,10,07], [2008,10,08], [2008,10,09], [2008,10,10], [2008,10,13], [2008,10,14], [2008,10,15]].map(function(d) { return new Date(d[0], d[1]-1, d[2]); })
  }
);

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

fig.layout.annotations = [{
  text: "the fall of Lehman Brothers",
  x: '2008-09-15',
  y: 1.02,
  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: '2008-09-15',
  x1: '2008-09-15',
  type: 'line',
  y0: 0,
  y1: 1,
  xref: 'x',
  yref: 'paper',
  line: {
    color: 'rgb(40,40,40)',
    width: 0.5
  }
}];

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.