JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.11.1/plotly.min.js"></script>
<div id="myDiv">
</div>
JavaScript
const trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
mode: 'markers',
type: 'scatter'
};
const trace2 = {
x: [2, 3, 4, 5],
y: [16, 5, 11, 9],
mode: 'lines',
type: 'scatter'
};
const trace3 = {
x: [1, 2, 3, 4],
y: [12, 9, 15, 12],
mode: 'lines+markers',
type: 'scatter'
};
const template = {
"data": {
"barpolar": [
{
"marker": {
"line": {
"color": "rgb(17,17,17)",
"width": 0.5
},
"pattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
}
},
"type": "barpolar"
}
],
"bar": [
{
"error_x": {
"color": "#f2f5fa"
},
"error_y": {
"color": "#f2f5fa"
},
"marker": {
"line": {
"color": "rgb(17,17,17)",
"width": 0.5
},
"pattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
}
},
"type": "bar"
}
],
"carpet": [
{
"aaxis": {
"endlinecolor": "#A2B1C6",
"gridcolor": "#506784",
"linecolor": "#506784",
"minorgridcolor": "#506784",
"startlinecolor": "#A2B1C6"
},
"baxis": {
"endlinecolor": "#A2B1C6",
"gridcolor": "#506784",
"linecolor": "#506784",
"minorgridcolor": "#506784",
"startlinecolor": "#A2B1C6"
...