title: Stacked Bar Chart Labels - D3
body: <p>I'm trying to add data labels to stacked bar chart in d3. </p>
  
  <p>I wanted the data labels to be in the middle of the bar. So far i just figured out how to add data labels on top of each bar. But actually i wanted those labels to be in the middle of each bar.</p>
  
  <p><strong>Here's my code</strong> :
  </p>
  
  <pre><code>var width = 750,
  height = 500;
  
  var x = d3.scale.ordinal()
          .rangeRoundBands([0, width], .1);
  
  var y = d3.scale.linear()
          .rangeRound([height, 0]);
  
  var color = d3.scale.ordinal()
              .range(["#D70B16", "#154CEF", "#1A8A55"]);
  
  var xAxis = d3.svg.axis()
              .scale(x)
              .orient("bottom");
  
  var yAxis = d3.svg.axis()
              .scale(y)
              .orienta("left")
              .tickFormat(d3.format(".2s"));
  
  var tip = d3.tip()
          .attr('class', 'd3-tip')
          .offset([-10, 0])
          .html(function(d) {
          return "Value: " + (d.y1 - d.y0) + "";
          })
  
  var svgContainer = d3.select("body")
                      .append("svg")
                      .attr("width", width)
                      .attr("height", height)
                      .append("g")
                      .attr("transform", "translate(" + 30 + "," + 30 + ")");
  
  
  d3.csv("data.csv", function(error, data) {
    color.domain(d3.keys(data[0]).filter(function(key) { 
      return key !== "circle"; 
      }));
  
    data.forEach(function(d) {
      var y0 = 0;
      d.hours = color.domain().map(function(name) { 
        return {name: name, y0: y0, y1: y0 += +d[name]}; 
        });
  
      d3.select('body').append('pre')
              .text(JSON.stringify(d.hours, null, '  '));
  
      d.total = d.hours[d.hours.length - 1].y1;
    });
  
    x.domain(data.map(function(d) {return d.circle;}));
    y.domain([0, d3.max(data, function(d) {return d.total;})])
  
    svgContainer.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);
  
    svgContainer.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Login Hours");
  
    var circle = svgContainer.selectAll(".circle")
                .data(data)
                .enter().append("g")
                .attr("class", "g")
                .attr("transform", function(d) { 
                  return "translate(" + x(d.circle) + ",0)"; 
                });
  
    circle.selectAll("rect")
          .data(function(d) { return d.hours; })
          .enter()
          .append("rect")
          .attr("width", x.rangeBand())
          .attr("y", function(d) { return y(d.y1); })
          .attr("height", function(d) { return y(d.y0) - y(d.y1); })
          .on("mouseover", tip.show)
          .on("mouseout", tip.hide)
          .style("fill", function(d) { return color(d.name); });
  
  
    circle.selectAll("text")
          .data(function(d) { return d.hours; })
          .enter()
          .append("text")
          .attr("x", 75)
          .attr("y", function(d, i) { return y(d.y1) ; })
          .style("text-anchor", "middle")
          .text("test")
  
  })
  </code></pre>
  
  <p><strong>Data</strong> :</p>
  
  <pre><code>state,value1, value2, value3
  state1, 80, 10, 20
  state2, 90, 5, 10
  state3, 70, 15, 35
  state4, 90, 3, 27
  state5, 50, 25, 55
  state6, 85, 8, 27
  </code></pre>
  
  <p>I actually couldn't figure out how to get the mid point of X &amp; Y  co-ordinates of each bar.</p>
  
  <p>Help me in arranging the labels in the middle of each bar.</p>