<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"></div>
  <script>
  /* JAVASCRIPT CODE GOES HERE */
  </script>
</body>
</html>




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 trace1 = {
    type: "scatter",
    mode: "lines",
    name: 'AAPL High',
    x: unpack(rows, 'Date'),
    y: unpack(rows, 'AAPL.High'),
    line: {
      color: '#17BECF'
    }
  }

  var trace2 = {
    type: "scatter",
    mode: "lines",
    name: 'AAPL Low',
    x: unpack(rows, 'Date'),
    y: unpack(rows, 'AAPL.Low'),
    line: {
      color: '#7F7F7F'
    }
  }

  var data = [trace1, trace2];

  var layout = {
    title: 'Time series with custom tickformat',
    xaxis: {
      tickformat: '%_d %B (%a)\n %Y', // For more time formatting types, see: https://github.com/d3/d3-time-format/blob/master/README.md
		tick0:"2000-03-01",
		dtick: "M3"
    }
  };

  Plotly.newPlot('myDiv', data, layout);
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.