JSFiddle - React, Tailwind, and code Playground

by Josh Williams

HTML

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

<body>
    <h4>gl</h4>
    <div id="glDiv" style="width: 100%; height: 500px;"></div>
    <h4>svg</h4>
    <div id="svgDiv" style="width: 100%; height: 500px;"></div>
</body>

JavaScript

var glTrace1 = {
    x: [0, 1, 2],
    y: [0, 1, 2],
    mode: 'lines+markers',
    type: 'scattergl'
};
var glTrace2 = {
    x: [0, 1, 2],
    y: [2, 1, 0],
    mode: 'lines+markers',
    type: 'scattergl',
    yaxis: 'y2'
};
var glData = [glTrace1, glTrace2];



var svgTrace1 = {
    x: [0, 1, 2],
    y: [0, 1, 2],
    mode: 'lines+markers',
    type: 'scatter'
};
var svgTrace2 = {
    x: [0, 1, 2],
    y: [2, 1, 0],
    mode: 'lines+markers',
    type: 'scatter',
    yaxis: 'y2'
};
var svgData = [svgTrace1, svgTrace2];



var layout = {
    yaxis: {
        side: 'left'
    },
    yaxis2: {
        side: 'right',
        overlaying: 'y'
    }
};
Plotly.newPlot('glDiv', glData, layout);
Plotly.newPlot('svgDiv', svgData, layout);