JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="budgetvsSpent" style="width:100%; height: 100%;">

</div>

CSS

.gridXBudgetVsSpent line{
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.gridXBudgetVsSpent path {
  stroke-width: 0;
}

.xaxisBudgetVsSpent path, .xaxisBudgetVsSpent line{
    stroke:#DDE3E6;
  }
 .xaxisBudgetVsSpent text{
    fill : #778E9E;;
    text-anchor : end;
 }
.yaxisBudgetVsSpent path, .yaxisBudgetVsSpent line{
    stroke:none;
  }
 .yaxisBudgetVsSpent text{
    fill : #778E9E;;
    text-anchor : end;
 }

JavaScript

var data = [{
    name: "A",
    value: 1,
    value2: 2
}, {
    name: "B",
    value: 4,
    value2: 5
}, {
    name: "C",
    value: 7,
    value2: 9
}, {
    name: "D",
    value: 2,
    value2: 7
}, {
    name: "E",
    value: 1,
    value2: 1
}, {
    name: "F",
    value: 5,
    value2: 2
}];

var svg  = d3.select("#budgetvsSpent")
  .append("svg")
  .attr("class", "budgetvsSpentSVG")
  .attr("preserveAspectRatio", "xMinYMin meet")
  .attr(
  "viewBox",
  "0 0 " +
  $("#budgetvsSpent").width() +
  " " +
  $("#budgetvsSpent").height()
);
            
var margin = {
    top: 30,
    right: 10,
    bottom: 10,
    left: 100
},
width = $("#budgetvsSpent").width() - margin.left - margin.right,
height = $("#budgetvsSpent").height() - margin.top - margin.bottom;

var g = svg.append("g")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleLinear()
    .range([0, width])

var y = d3.scaleBand()
      .rangeRound([0, height])
      .padding(0.1);
    
let xVal = d3.max(data, function(d) {
              return Math.max(d.value, d.value2);
            });
            
var xAxis = d3
            .axisTop(x),
    yAxis = d3.axisLeft(y).ticks(5);
console.log(xVal)
x.domain([-xVal,xVal]);
            
y.domain(data.map(function (d) {
    return d.name;
}));

g.append("g")
      .attr("class", "gridXBudgetVsSpent")
      .call(d3.axisBottom(x)
        .tickSize(height)
        .tickFormat("")
      )
      
g.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function (d) {
      return x(Math.min(0, d.value));
    })
    .attr("y", function (d) {
      return y(d.name);
    })
    .attr("width", function (d) {
      return Math.abs(x(d.value) - x(0));
    })
    .attr("height", y.bandwidth())
    .attr("fill", "orange");
 
g.selectAll(".bar2")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar2")
    .attr("x", function (d) {
       return x(Math.min(0,...