<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this div -->
<div id="plotly-div"></div>
<script>
// JAVASCRIPT CODE GOES HERE
</script>
</body>
</html>
var trace1 = {
  x: ['2017-01-17', '2017-01-18', '2017-01-19', '2017-01-20'], 
  close: [120, 119.989998, 119.779999, 120], 
  decreasing: {line: {color: '#7F7F7F'}}, 
  high: [120.239998, 120.5, null, 120.449997], 
  increasing: {line: {color: '#17BECF'}}, 
  line: {color: 'rgba(31,119,180,1)'}, 
  low: [118.220001, 119.709999, '', 119.730003], 
  open: [118.339996, 120, 119.400002, 120.449997], 
  type: 'ohlc', 
  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'
  }
};

Plotly.plot('plotly-div', data, layout);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.