<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: 100%; height: 500px;"></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 x = unpack(rows, 'Date')
  var y = unpack(rows, 'AAPL.Volume')

  var trace = {
    type: "scatter",
    mode: "lines",
    name: 'AAPL Volume',
    x: x,
    y: y,
    line: {color: 'grey'}
  }

  var data = [trace]; 
    
var layout = {
  title: 'Volume of Apple Shares Traded',
  xaxis: {
    title: 'AXIS TITLE',
    titlefont: {
      family: 'Arial, sans-serif',
      size: 18,
      color: 'lightgrey'
    },
    showticklabels: true,
    tickangle: 'auto',
    tickfont: {
      family: 'Old Standard TT, serif',
      size: 14,
      color: 'black'
    },
    exponentformat: 'e',
    showexponent: 'all'
  },
  yaxis: {
    title: 'AXIS TITLE',
    titlefont: {
      family: 'Arial, sans-serif',
      size: 18,
      color: 'lightgrey'
    },
    showticklabels: true,
    tickangle: 45,
    tickfont: {
      family: 'Old Standard TT, serif',
      size: 14,
      color: 'black'
    },
    exponentformat: 'e',
    showexponent: 'all'
  }
};

Plotly.newPlot('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.