JSFiddle - React, Tailwind, and code Playground

by Lucidio Vacas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.min.css">
<title>egress queues</title>

<body>
  <div id="root">
    <div id="qdiv"></div>
    <p></p>
    <div id="bdiv"></div>
  </div>

CSS

.dygraph-label.dygraph-title {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  // font-size: large;
  color: white;
  // color: floralwhite;
}

// .dygraph-label.dygraph-xlabel
// .dygraph-label.dygraph-ylabel
.dygraph-axis-label.dygraph-axis-label-x {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  font-size: small;
}

.dygraph-axis-label.dygraph-axis-label-y {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  font-size: small;
}

.dygraph-legend {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  font-size: small !important;
  color: white;
  // color: floralwhite;
  background: transparent !important;
  // background: rgba(169, 169, 169, 0.4) !important;
  left: auto !important;
  // left: 60px !important;
  // top: auto !important;
  // bottom: 20px !important;
  right: 10px !important;
  // right: auto !important;
  width: auto !important;
  // text-align: right !important;
  // overflow: visible !important;
  z-index: auto !important;
}

#root {
  left: 25px;
  top: 50px;
  right: 50px;
  bottom: 50px;
  position: absolute;
}

#qdiv {
  width: 100%;
  height: 50%;
}

#bdiv {
  width: 100%;
  height: 50%;
}

JavaScript

var data = "date,totalIn,totalOut,interacOut,tcp_ackOut,regularOut,extwlanOut,torrentOut,extwlanIn\n" +
	  "0.0167,1926,-1641,-64,-202,-1534,0,0,0\n" +
	  "0.0333,1060,-1230,-101,-68,-1187,0,0,0\n" +
	  "0.0500,3127,-2421,-123,-79,-2383,0,0,0\n" +
	  "0.0667,5624,-2518,-45,-623,-2187,0,0,0\n" +
	  "0.08333,998,-1190,-100,-45,-1160,0,0,0";
	q = new Dygraph(
	  document.getElementById("qdiv"),
	  data, {
	    // Appears axisLabelColor is no longer supported in 2.0
	    // axisLabelColor: 'darkgrey',
	    // logscale: true,
	    // labelsDiv: 'qldiv',
	    title: 'queues',
	    titleHeight: 32,
	    axes: {
	      x: {
	        axisLabelFormatter: Dygraph.dateAxisLabelFormatter,
	        valueFormatter: function(ms){
          		var formattedDate = formatDate(ms);
          		return formattedDate;
          },
	        ticker: Dygraph.dateTicker
	      }
	    },
	    xValueParser: function(x) {
	      return x;
	    },
	    // xValueParser: function (x) { return 1000 * parseInt(x); },
	    fillGraph: true,
	    stackedGraph: true,
	    // strokeBorderWidth: 1,
	    // strokeWidth: 2,
	    // totalIn,totalOut,interacOut,tcp_ackOut,regularOut,extwlanOut,torrentOut,extwlanIn
	    visibility: [false, false, true, true, true, true, true, false],
	    // colors: ['black', 'black', 'orange', 'blue', 'green', 'purple', 'yellow', 'red'],
	    colors: ['black', 'black', 'coral', 'dodgerblue', 'forestgreen', 'blueviolet', 'gold'],
	    // iWantHue default soft
	    // colors: ['black', 'black', '#cb673e', '#648ace', '#5ba962', '#ab62c0', '#a9983d', '#c95779'],
	    // iWantHue fancy light hard
	    // colors: ['black', 'black', '#c2007a', '#59dacd', '#019a3f', '#793ec4', '#c9b800', '#c00613'],
	    // iWantHue fluo soft
	    // colors: ['black', 'black', '#cb5c42', '#648ace', '#60a85f', '#a361c7', '#b3953f', '#cb5c42'],
	    fillAlpha: .5,
	    animatedZooms: true,
	    highlightCircleSize: 6,
	    highlightSeriesBackgroundAlpha: .9,
	    // Disabled highlightSeriesOpts as it...