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

<body style="background-color: black">
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>

var trace1 = {
  x: [2, 3, 4, 5],
  y: [16, 5, 11, 10],
  mode: 'lines',
  line: {width: 1, color: '#7cbce9'}
};

var trace2 = {
  x: [1, 2, 3, 4],
  y: [12, 9, 15, 12],
  mode: 'lines',
  line: {width: 1, color: '#2ca02c'}
};

var data = [ trace1, trace2 ];

var layout = {
    paper_bgcolor: 'rgba(0,0,0,0)',
    plot_bgcolor: 'rgba(0,0,0,0)',
  xaxis: {
      autorange: true,
      zeroline: false,
      title: 'Foo 1',
      titlefont: {
        family: 'Helvetica Neue,Helvetica,Arial,sans-serif',
        size: '14',
        color: '#c8c8c8',
      },
      gridwidth: 0.5,
      gridcolor: '#9c9c9c',
      mirror: 'ticks',
      ticklen: 0,
      tickformat: '.03f',
      // the tick color.
      tickcolor: '#c8c8c8',
      tickfont: {
        family: 'Helvetica Neue,Helvetica,Arial,sans-serif',
        size: '10',
        color: '#c8c8c8',
      },
      tickprefix: '    ',
      separatethousands: false,
      linecolor: '#9c9c9c',
      linewidth: 2,
    },
   yaxis: {
      zeroline: false,
      title: 'Foo 2',
      titlefont: {
        family: 'Helvetica Neue,Helvetica,Arial,sans-serif',
        size: '14',
        color: '#c8c8c8',
      },
      gridwidth: 0.5,
      gridcolor: '#9c9c9c',
      mirror: 'ticks',
      tickprefix: '    ',
      ticklen: 0,
      tickformat: '.01f',
      tickcolor: '#c8c8c8',
      tickfont: {
        family: 'Helvetica Neue,Helvetica,Arial,sans-serif',
        size: '10',
        color: '#c8c8c8',
      },
      nticks: 10,
      linecolor: '#9c9c9c',
      linewidth: 2,
    },
  legend: {
      font: {
        family: 'Helvetica Neue,Helvetica,Arial,sans-serif',
        size: 12,
        color: '#c8c8c8',
      },
    },
};

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