<head>
<!-- Plotly.js -->
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
        </head>
        <body>
        <!-- Plotly chart will be drawn inside this DIV -->
        <div id="myDiv" style="width:600; height:800"></div>
        <script>
        /* JAVASCRIPT CODE GOES HERE */
        </script>
        </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'
  }, 
  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.