JSFiddle - React, Tailwind, and code Playground

by matrixwebtech

HTML

<script src="https://d3js.org/d3.v3.js"></script>
<!DOCTYPE html>

<body>


  <div>
    <svg id="graph"></svg>
  </div>
</body>

CSS

<style> body {
  font: 10px sans-serif;
}

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

.bar {
  fill: orange;
}

.bar:hover {
  fill: orangered;
}

.x.axis path {
  display: none;
}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}


/* 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;
}

div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 28px;
  padding: 2px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

</style>

JavaScript

//https://bl.ocks.org/nanu146/f48ffc5ec10270f55c9e1fb3da8b38f0
function getTextWidth(text, fontSize, fontName) {
  c = document.createElement("canvas");
  ctx = c.getContext("2d");
  ctx.font = fontSize + ' ' + fontName;
  return ctx.measureText(text).width;
}

function DataSegregator(array, on) {
  var SegData;
  OrdinalPositionHolder = {
    valueOf: function() {
      thisObject = this;
      keys = Object.keys(thisObject);
      keys.splice(keys.indexOf("valueOf"), 1);
      keys.splice(keys.indexOf("keys"), 1);
      return keys.length == 0 ? -1 : d3.max(keys, function(d) {
        return thisObject[d]
      })
    },
    keys: function() {
      keys = Object.keys(thisObject);
      keys.splice(keys.indexOf("valueOf"), 1);
      keys.splice(keys.indexOf("keys"), 1);
      return keys;
    }
  }
  array[0].map(function(d) {
    return d[on]
  }).forEach(function(b) {
    value = OrdinalPositionHolder.valueOf();
    OrdinalPositionHolder[b] = OrdinalPositionHolder > -1 ? ++value : 0;
  })

  SegData = OrdinalPositionHolder.keys().map(function() {
    return [];
  });

  array.forEach(function(d) {
    d.forEach(function(b) {
      SegData[OrdinalPositionHolder[b[on]]].push(b);
    })
  });

  return SegData;
}

Data = [{
  Date: "1",
  Categories: [{
    Name: "Test  Exam Jan",
    Value: 10
  }],
  LineCategory: [{
    Name: "Line1",
    Value: 69
  }]
}, {
  Date: "2",
  Categories: [{
    Name: "Test  Exam Feb",
    Value: 1
  }],
  LineCategory: [{
    Name: "Line1",
    Value: 89
  }]
}, {
  Date: "3",
  Categories: [{
    Name: "Test  Exam March",
    Value: 1
  }],
  LineCategory: [{
    Name: "Line1",
    Value: 72
  }]
}, {
  Date: "4",
  Categories: [{
    Name: "Test  Exam 1",
    Value: 1
  }],
  LineCategory: [{
    Name: "Line1",
    Value: 75
  }]
}, {
  Date: "5",
  Categories: [{
    Name: "Test  Exam 2",
    Value: 5
  }],
  LineCategory: [{
    Name: "Line1",
    Value: 52
  }]
}, {
  Date: "6",
  Categories: [{
    Name: "Test  Exam 3",
  ...