<head>
  <script src="https://cdn.plot.ly/plotly-2.32.0.min.js" charset="utf-8"></script>
</head>
<html>
  <body>
    <div id="myDiv"></div>
  </body>
</html>
let trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  yaxis: "y2",
  type: 'scatter'
}
let trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [1, 0, 3, 2, 5, 4, 7, 6, 8],
  yaxis: "y2",
  type: 'scatter'
}
let trace3 = {}
let data = [trace1, trace2, trace3]
let layout = {
  showlegend: false,
  xaxis: {
    anchor: "y2",
    range: [0,8]
  },
  yaxis: {
    ticksuffix: "%",
    range: [0, 100]
  },
  yaxis2: {
    showline: true,
    side: "right",
    overlaying: "y",
    scaleanchor: "y1",
    tickmode: "sync",
    range: [0, 8]
  }
}
let config = {
  responsive: true
}
let layer = document.getElementById("myDiv")
Plotly.newPlot(layer, data, layout, config)
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.