JSFiddle - React, Tailwind, and code Playground

by Dipak1991

HTML

<script src="http://dygraphs.com/dygraph-dev.js"></script>
<!-- You may set style: "width: ...; height: ..." to size the chart -->
<div id="graph"></div>
<div style="font-family:tahoma,arial,sans-serif;text-size:120%;border:2px solid;border-radius:15px;background-color:Bisque;padding:4px;width:420px">
    
<B><I>&nbsp;Click & Drag</i></b> to select an area to magnify.
    <br>
    
<B><I>&nbsp;Shift-Click & Drag</i></b> to pan.
    <br>
    
<B><I>&nbsp;Double-Click</i></b> to restore (zoom out to) the original view.</div>
<P/>
<table>
    <row>
        <td>
            <div id="graphdiv2" style="width:1200px; height:300px;border:2px solid;border-radius:15px;background-color:Bisque;"></div>
        </td>
        <td valign="top">
            <div id="chartLabelsContainer" style="padding:4px;width:140px;border:1px solid black;border-radius:10px;background-color:Bisque;box-shadow:4px 4px 4px #888;"></div>
        </td>
    </row>
</table>

CSS

/*
Relevant CSS classes include:

Labels on the X & Y axes:
.dygraph-axis-label
.dygraph-axis-label-x
.dygraph-axis-label-y
.dygraph-axis-label-y2

Chart labels, see http://dygraphs.com/tests/styled-chart-labels.html
.dygraph-title
.dygraph-xlabel
.dygraph-ylabel
.dygraph-y2label

The legend, see http://dygraphs.com/tests/series-highlight.html
.dygraph-legend
*/

JavaScript

var vGraph2 = new Dygraph(document.getElementById("graphdiv2"), [
       [new Date("2012/10/01 00:00:00"), null],
       [new Date("2012/10/21 14:30:32"), 1],
       [new Date("2012/10/21 14:30:43"), 1],
       [new Date("2012/10/21 14:32:31"), 1],
       [new Date("2012/10/21 14:32:51"), 1],
       [new Date("2012/10/21 14:33:09"), 1],
       [new Date("2012/10/21 14:30:24"), 1],
       [new Date("2012/10/21 18:22:16"), 1],
       [new Date("2012/10/21 18:22:20"), 1],
       [new Date("2012/10/21 18:22:58"), 1],
       [new Date("2012/10/21 22:53:51"), 1],
       [new Date("2012/10/21 22:54:31"), 1],
       [new Date("2012/10/21 22:54:32"), null],
       [new Date("2012/10/21 23:02:52"), 3],
       [new Date("2012/10/21 23:07:37"), 3],
       [new Date("2012/10/21 23:16:26"), 3],
       [new Date("2012/10/21 23:19:50"), 3],
       [new Date("2012/10/21 23:29:14"), 3],
       [new Date("2012/10/21 23:30:32"), 3],
       [new Date("2012/10/21 23:36:35"), 1],
       [new Date("2012/10/21 23:38:44"), 2],
       [new Date("2012/10/21 23:50:09"), 3],
       [new Date("2012/10/21 23:53:44"), 3],
       [new Date("2012/10/21 23:59:42"), 2],
       [new Date("2012/10/22 00:01:56"), 2],
       [new Date("2012/10/22 00:07:19"), 3],
       [new Date("2012/10/22 00:07:20"), null],
       [new Date("2012/10/22 00:31:53"), 1],
       [new Date("2012/10/22 00:33:15"), 2],
       [new Date("2012/10/22 00:42:31"), 3],
       [new Date("2012/10/22 00:42:32"), null],
       [new Date("2012/10/22 00:47:53"), 1],
       [new Date("2012/10/22 00:52:05"), 2],
       [new Date("2012/10/22 01:01:01"), 3],
       [new Date("2012/10/22 01:04:49"), 3],
       [new Date("2012/10/22 01:06:14"), 2],
       [new Date("2012/10/22 01:09:42"), 1],
       [new Date("2012/10/22 01:23:19"), 1],
       [new Date("2012/10/22 01:26:46"), 2],
       [new Date("2012/10/22 01:35:13"), 3],
       [new Date("2012/10/22 01:40:35"), 3],
       [new Date("2012/10/22 01:40:40"), 3],
       [new Date("2012/10/31...