<head>
  <!-- Plotly.js -->
   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <div id="myDiv"></div>
</body>
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: 'ohlc', 
  xaxis: 'x', 
  yaxis: 'y'
};

var data = [trace];
  
var layout = {
  dragmode: 'zoom', 
  showlegend: false, 
  xaxis: {
    autorange: true, 
    title: 'Date',
	 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'
        }]
      }
  }, 
  yaxis: {
    autorange: true, 
  }
};

Plotly.plot('myDiv', data, layout, {showSendToCloud: true}); 
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.