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',
    xaxis: 'x2'
};
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',
    xaxis: 'x2'
};
var svgData = [svgTrace1, svgTrace2];



var layout = {
	showlegend: false,
    yaxis: {
        side: 'right',
        tickmode: 'array',
        ticktext: ['RightZero', 'RightOne', 'RightTwo'],
        tickvals: [0,1,2]
    },
    yaxis2: {
        side: 'left',
        tickmode: 'array',
        ticktext: ['LeftZero', 'LeftOne', 'LeftTwo'],
        tickvals: [0,1,2],
        overlaying: 'y'
    },
    xaxis: {
    	side: 'top',
        tickmode: 'array',
        ticktext: ['TopZero', 'TopOne', 'TopTwo'],
        tickvals: [0,1,2]
    },
    xaxis2: {
    	side: 'bottom',
        tickmode: 'array',
        ticktext: ['BottomZero', 'BottomOne', 'BottomTwo'],
        tickvals: [0,1,2]
    }
    
};
Plotly.newPlot('glDiv', glData, layout);
Plotly.newPlot('svgDiv', svgData, layout);