JSFiddle - React, Tailwind, and code Playground

by Vikash Kumar Gupta

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
  <div id="renderTime"></div>
  <div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>

JavaScript

var trace1 = {
  x: [1, 2, 3], 
  y: [4, 5, 6], 
  name: 'yaxis1 data', 
  type: 'scatter'
};

var trace2 = {
  x: [2, 3, 4], 
  y: [40, 50, 60], 
  name: 'yaxis2 data', 
  yaxis: 'y2', 
  type: 'scatter'
};

// var trace3 = {
//   x: [4, 5, 6], 
//   y: [40000, 50000, 60000], 
//   name: 'yaxis3 data', 
//   yaxis: 'y3', 
//   type: 'scatter'
// };

// var trace4 = {
//   x: [5, 6, 7], 
//   y: [400000, 500000, 600000], 
//   name: 'yaxis4 data', 
//   yaxis: 'y4', 
//   type: 'scatter'
// };

var data = [trace1];

var layout = {
  title: 'multiple y-axes example', 
  width: 800, 
  xaxis: {domain: [0.3, 0.7]}, 
  yaxis: {
    title: 'yaxis title', 
    titlefont: {color: '#1f77b4'}, 
    tickfont: {color: '#1f77b4'}
  }
  // yaxis2: {
  //   title: 'yaxis2 title', 
  //   titlefont: {color: '#ff7f0e'}, 
  //   tickfont: {color: '#ff7f0e'}, 
  //   anchor: 'free', 
  //   overlaying: 'y', 
  //   side: 'right', 
  //   position: 0.75
  // }
};

var t0= performance.now();
Plotly.newPlot('myDiv', data, layout);
var t1= performance.now();
document.getElementById("renderTime").innerHTML = (t1-t0).toFixed(2) +' ms';