JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.1.5.min.js"></script>
<div id="chartContainer">

CSS

path {
    stroke: black;
   }
line {
    stroke: blue;
}
path.marker {
    fill: red;
	stroke:red;
}

JavaScript

var yMax = 520; // overriding y axis
		var score=8000/100;
		var svg = dimple.newSvg("#chartContainer", 600, 600);
		var data = [{
			"Brand":"A", 
			"Day":"Mon", 
			"SalesVolume":100 },
			{ 
			"Brand":"B", 
			"Day":"Mon", 
			"SalesVolume":200 }];
		var myChart = new dimple.chart(svg, data);
		<!-- console.log(data[1].Brand,data[1].SalesVolume); -->
		myChart.setBounds(100, 50, 300, 300)
		var x = myChart.addCategoryAxis("x", "Day");
		var y = myChart.addMeasureAxis("y", "SalesVolume");
		y.overrideMax = yMax;
		 y.addOrderRule("SalesVolume");
		var s = myChart.addSeries("Brand", dimple.plot.bar);
		s.barGap=0.7;
		myChart.addLegend(120, 400, 300, 30, "left");
		
		s.addEventHandler("mouseover", onHover);

		s.addEventHandler("mouseleave", onLeave); 
		
		myChart.draw();
	
		d3.selectAll("rect").on("mouseover", null);
		s.shapes.on("mouseover", function (e) { dimple._showBarTooltip(e, this, chart, s); });
		var defs = svg.append("g");
		defs.append("marker")
		.attr("id", "triangle-start")
		.attr("viewBox", "-5 -5 10 10")
		.attr("refX", -1)
		.attr("refY", 0)
		.attr("markerWidth", 10)
		.attr("markerHeight", 10)
		.attr("orient", "auto")
		.append("path")
		.attr("class", "marker")
		.attr("d", "M 0 0 L 3 4 L 3 -4 z");
	
		 svg.append("line")
		.attr("x1",205)
		.attr("x2", 295)
		.attr("y1", (y._scale(score)))
		.attr("y2",(y._scale(score)))
		.attr('stroke','black')
		.attr("marker-end", "url(#triangle-start)")
		.style("stroke-dasharray", "3");	

var defs1 = svg.append("g");
		defs1.append("marker")
		.attr("id", "triangle-start1")
		.attr("viewBox", "-5 -5 10 10")
		.attr("refX", -1)
		.attr("refY", 0)
		.attr("markerWidth", 10)
		.attr("markerHeight", 10)
		.attr("orient", "auto")
		.append("path")
		.attr("class", "marker")
		.attr("d", "M 0 0 L 3 4 L 3 -4 z");
	
		 svg.append("line")
		.attr("x1",205)
		.attr("x2", 295)
		.attr("y1",200)
		.attr("y2",200)
		.attr('stroke','black')
		.attr("marker-start",...