JSFiddle - React, Tailwind, and code Playground

by James

HTML

<label><input class="checkBox"type="checkbox"> Sort values</label>
    
    
    
    <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

CSS

.bar {
  fill: #5491B5;
  /*stroke: #5491B5;
  stoke-width: 0.25px;*/
}

.bar:hover {
  fill: #E89B0C;
}

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.ticklines {
    stroke: lightgrey;
    opacity: 0.7;
}
.grid path {
      stroke-width: 0;
}
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
  text-align: center;
}

/*Creates a small triangle extender for the tooltip*/

.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/*Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

JavaScript

var dataGroup = [
    { "year": 2010.1, "agency": "Department of Education", "category": "Aid to Local Units of Government", "total": "980457127.47", "num_records": 2476 },
    { "year": 2010.2, "agency": "Department of Education", "category": "Contracted Professional Services", "total": "24951630.58", "num_records": 1103 },
    { "year": 2010.3, "agency": "Department of Education", "category": "Capital Purchases and Equipment", "total": "22034760.55", "num_records": 103 },
    { "year": 2010.4, "agency": "Department of Education", "category": "Salary/Wages", "total": "22025267.21", "num_records": 219 },
    { "year": 2010.5, "agency": "Department of Education", "category": "Assistance and Grants", "total": "15860580.26", "num_records": 818 },
    { "year": 2010.6, "agency": "Department of Education", "category": "Benefits", "total": "11053161.91", "num_records": 217 },
    { "year": 2010.7, "agency": "Department of Education", "category": "Operating Supplies and Expenses", "total": "8447611.18", "num_records": 3689 },
    {
        "year": 2011.1,
        "agency": "Department of Education",
        "category": "Aid to Local Units of Government",
        "total": "1033290512.21",
        "num_records": 2608
    },
    {
        "year": 2011.2,
        "agency": "Department of Education",
        "category": "Contracted Professional Services",
        "total": "30847420.15",
        "num_records": 1145
    },
    {
        "year": 2011.3,
        "agency": "Department of Education",
        "category": "Salary/Wages",
        "total": "22850418.22",
        "num_records": 486
    },
    {
        "year": 2011.4,
        "agency": "Department of Education",
        "category": "Assistance and Grants",
        "total": "15767941.38",
        "num_records": 821
    },
    {
        "year": 2011.5,
        "agency": "Department of Education",
        "category": "Benefits",
        "total": "11956400.08",
        "num_records": 200
    },
    {
        "year":...