JSFiddle - React, Tailwind, and code Playground

by slim7700

HTML

<script src="	&lt;link href=&#39;http://fonts.googleapis.com/css?family=Lato&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;&gt;"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
<svg id="chart1"></svg>
https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.js
<script src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.js"></script>

CSS

text {
          font: 12px Lato;
      }
      svg {
          display: block;
      }
      html, body, svg {
          margin: 0px;
          padding: 0px;
          height: 100%;
          width: 100%;
      }

JavaScript

var expandLegend = function () {
          var exp = chart.legend.expanded();
          chart.legend.expanded(!exp);
          chart.update();
      }

      var histcatexplong = [{
          "key": "Fully Automated",
              "values": [
              [1406937600000, 4905],
              [1409616000000, 4583],
              [1412208000000, 5276],
              [1414886400000, 6300],
              [1417478400000, 4684],
              [1420156800000, 15129],
              [1422835200000, 11186],
              [1425254400000, 8555],
              [1427932800000, 4866],
              [1430524800000, 6080],
              [1433203200000, 5729],
              [1435795200000, 5467],
              [1438473600000, 3800],
              [1441152000000, 4345]
          ]
      },

       {
          "key": "Partially Automated",
              "values": [
              [1406937600000, 638],
              [1409616000000, 379],
              [1412208000000, 684],
              [1414886400000, 934],
              [1417478400000, 509],
              [1420156800000, 399],
              [1422835200000, 329],
              [1425254400000, 340],
              [1427932800000, 0],
              [1430524800000, 0],
              [1433203200000, 0],
              [1435795200000, 0],
              [1438473600000, 0],
              [1441152000000, 0]
          ]
      },

       {
          "key": "Fully Aided",
              "values": [
              [1406937600000, 5018],
              [1409616000000, 4848],
              [1412208000000, 5441],
              [1414886400000, 6822],
              [1417478400000, 5353],
              [1420156800000, 14625],
              [1422835200000, 11084],
              [1425254400000, 8812],
              [1427932800000, 5855],
              [1430524800000, 7245],
              [1433203200000, 7505],
              [1435795200000, 8417],
              [1438473600000, 6245],
              [1441152000000, 6312]
          ]


      }];

      var...