JSFiddle - React, Tailwind, and code Playground

by matrixwebtech

HTML

<!DOCTYPE html>


<body>
    <script src="https://d3js.org/d3.v3.js"></script>

	<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: "Test  Exam Jan 1", Categories: [{ Name: "Test  Exam Jan", Value: 10 }], LineCategory: [{ Name: "Line1", Value: 69 }] },
{ Date: "Test  Exam Jan 2", Categories: [{ Name: "Test  Exam Feb", Value: 1 }], LineCategory: [{ Name: "Line1", Value: 89 }] },
{ Date: "Test  Exam Jan 3", Categories: [{ Name: "Test  Exam March", Value: 1 }],...