JSFiddle - React, Tailwind, and code Playground

CSS

.axis text {
font: 10px sans-serif;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}

JavaScript

function barStack(d) {
var l = d[0].length
while (l--) {
	var posBase = 0, negBase = 0;
	d.forEach(function(d) {
		d=d[l]
		d.size = Math.abs(d.y)
		if (d.y<0)  {
			d.y0 = negBase
			negBase-=d.size
		} else
		{ 
			d.y0 = posBase = posBase + d.size
		} 
	})
}
d.extent= d3.extent(d3.merge(d3.merge(d.map(function(e) { return e.map(function(f) { return [f.y0,f.y0-f.size]})}))))
return d
}

/* Here is an example */

var initialData = [{x:"abc",  y1:"3",  y2:"4",  y3:"10"},
                   {x:"abc2", y1:"6",  y2:"1", y3:"8" },
                   {x:"abc3", y1:"-3", y2:"-9", y3:"4"}
                  ];

var data = ["y1","y2","y3"].map(
    function(v){
      return initialData.map(function(d){
        return  {y: d[v]}
    });
});

var  h=500
,w=500
,margin=10
,color = d3.scale.category10()

,x = d3.scale.ordinal()
    .domain(initialData.map(function(d){return d.x}))
	.rangeRoundBands([margin,w-margin], .1)

,y = d3.scale.linear()
	.range([h-margin,0+margin])

,xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(6, 0)
,yAxis = d3.svg.axis().scale(y).orient("left")

barStack(data)
console.log
y.domain(data.extent)

svg = d3.select("body")
.append("svg")
.attr("height",h)
.attr("width",w)

var plots = svg.selectAll(".series").data(data)
.enter().append("g").classed("series",true).style("fill", function(d,i) {
    console.log(d);
    return color(i)})

plots.selectAll("rect").data(Object)
	.enter().append("rect")
		.attr("x",function(d,i) { return x(x.domain()[i])})
		.attr("y",function(d) { return y(d.y0)})
		.attr("height",function(d) { return y(0)-y(d.size)})
		.attr("width",x.rangeBand());


plots.selectAll("text.lab").data(Object)
     .enter().append("text")
     .attr('fill','black')
     .attr('class','lab')
     //.attr("transform", "translate(50,0)")
     .attr("text-anchor", "middle")
     .attr("x", function(d, i) { return x(x.domain()[i]) + (x.rangeBand()/2)})
     .attr("y", function(d) {return y(d.y0) +20})
     .text(function(d) {
        ...