<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 trace0 = {
  x: [0,1,1,0,0,1,1,2,2,3,3,2,2,3], 
  y: [0,0,1,1,3,3,2,2,3,3,1,1,0,0]
}

var trace1 = {
  x: [0,1,2,3], 
  y: [1,2,4,8], 
  yaxis:"y2"
}

var trace2 = {
  x: [1,10,100,10,1], 
  y: [0,1,2,3,4], 
  xaxis: "x2", 
  yaxis:"y3",
}

var trace3 = {
  x: [1,100,30,80,1], 
  y: [1,1.5,2,2.5,3], 
  xaxis:"x2", 
  yaxis:"y4"
}

var data = [trace0,trace1,trace2,trace3]

var layout = {
    width: 800,
    height: 500,
    title: "fixed-ratio axes",
    xaxis: {
      nticks: 10, 
      domain: [0, 0.45], 
      title: "shared X axis"
    },
    yaxis: {
      scaleanchor: "x", 
      domain: [0, 0.45], 
      title: "1:1"
    },
    yaxis2: {
      scaleanchor: "x", 
      scaleratio: 0.2, 
      domain: [0.55,1], 
      title: "1:5"
    },
    xaxis2: {
      type: "log", 
      domain: [0.55, 1], 
      anchor: "y3", 
      title: "unconstrained log X"
    },
    yaxis3: {
      domain: [0, 0.45], 
      anchor: "x2", 
      title: "Scale matches ->"
    },
    yaxis4: {
      scaleanchor: "y3", 
      domain: [0.55, 1], 
      anchor: "x2", 
      title: "Scale matches <-"
    },
    showlegend: false
}

Plotly.plot('plotly-div', 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.