JSFiddle - React, Tailwind, and code Playground
HTML
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<button onclick="react()">Animate</button>
<div id="myDiv" style="width:100%;height:100%"></div>
<script>
let chartBefore = {
"layout":{
"showlegend":true,
"width":768,
"height":587,
"xaxis": {
"autorange": true
}
},
"data":[
{
"x":[
"2019-04-04T21:10:20.800Z",
"2019-04-04T21:10:21.800Z",
"2019-04-04T21:10:22.801Z",
"2019-04-04T21:10:23.801Z",
"2019-04-04T21:10:24.801Z",
"2019-04-04T21:10:25.801Z",
"2019-04-04T21:10:26.801Z",
"2019-04-04T21:10:27.801Z",
"2019-04-04T21:10:28.801Z",
"2019-04-04T21:10:29.801Z"
],
"y":[
70.23026433962625,
36.36058756898337,
98.36545840719809,
37.762281715479354,
26.164947421153272,
6.133906223560103,
37.98418816321261,
42.57223702168337,
65.41418749952341,
60.39193697599825
],
"mode":"lines",
"type":"scatter"
}
]
}
let chartAfter = {
"layout":{
"showlegend":true,
"width":768,
"height":587,
"xaxis": {
"autorange": true
}
},
"data":[
{
"x":[
"2019-04-04T21:10:25.800Z",
"2019-04-04T21:10:26.800Z",
"2019-04-04T21:10:27.801Z",
"2019-04-04T21:10:28.801Z",
"2019-04-04T21:10:29.801Z",
"2019-04-04T21:10:30.801Z",
"2019-04-04T21:10:31.801Z",
"2019-04-04T21:10:32.801Z",
"2019-04-04T21:10:33.801Z",
"2019-04-04T21:10:34.801Z"
],
"y":[
25.23026433962625,
52.36058756898337,
14.36545840719809,
57.762281715479354,
82.164947421153272,
...