Text On each bar of a stacked bar chart d3.js

Question

I would like to have some text in each bar of a stacked bar in stacked bar chart provided in d3.js library.

Thanks for your help.

I have customized the example here link but I have not changed anything else in the javascript code

and here is the result result

000 · Answer 1 · 2013-07-11T14:08:24.117

6

Here is the important piece of code:

  state.selectAll("rect")
      .data(function(d) { return d.ages; })
    .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); })
      .style("fill", function(d) { return color(d.name); });

This binds each data point to the colored rectangles. To add text, change it like this:

  var ages_enter = state.selectAll("rect")
      .data(function(d) { return d.ages; })
    .enter();
  ages_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); })
      .style("fill", function(d) { return color(d.name); });
  ages_enter.append("text")
      .text(function(d) { return d3.format(".2s")(d.y1); })
      .attr("y", function(d) { return y(d.y1)+16; })
      .style("stroke", '#ffffff');

This stores a pointer to the "enter" method that is called for each data point, then adds an additional element to the svg for each data point.

edited Jul 11 '13 at 14:08

answered Jul 10 '13 at 15:28

000

26,951
10
71
101

thank you for your answer. This only adds text in one bar and I would like to add in both of each bar (the two). – user2401221 Jul 11 '13 at 07:10
I have a feeling the issue now is that it is drawing the text and boxes, but drawing the following box on top of the previous text. Svg doesn't have a z-index, it's based on the order that things are appended. I'm on a phone right now but I'll try to run the demo later. – 000 Jul 11 '13 at 13:47
I've changed my answer. Suspicions were confirmed. The text was showing, but was being displayed below (z-axis) the next bar. I've fixed it by moving the text down 16px. – 000 Jul 11 '13 at 14:09
The text is a bit cramped when there are a lot of things going on at once. Here's a fiddle from a question I had earlier that may be useful: http://jsfiddle.net/kKvtJ/5/ – 000 Jul 11 '13 at 14:11

Aravind Cheekkallur · Answer 2 · 2015-03-12T07:07:42.933

I plotted out with this code. Text will append into center of the stacked chart . We need to find out the x coordinate values for position the text. For that barWidth/2 is used.Demo Sorted Stacked Bar Chart

 var state= svg.selectAll(".state")
  .data(data)
.enter().append("g")
  .attr("class", "state")
  .attr("transform", function(d) { return "translate(" + (x(d.state)) + ",0)"; });

  module.selectAll("rect")
  .data(function(d) { return d.ages; })
  .enter().append("rect")
  .attr("width", x.rangeBand())
  .attr("y", 200)
  .attr("height", 100) 
  .style("fill", function(d) { return color(d.name); })
  .transition()
   .delay(function(d, i) { return i * 200; })
   .duration(4000)
   .attr("y", function(d) { return y(d.y1); })
   .attr('height', function(d) { return y(d.y0) - y(d.y1); });

 module.append("text")
  .attr("y", 400)
  .attr("x",x.rangeBand()/2 )
  .style("text-anchor", "middle")
  .style("font-size", "20px")
  .style("color", "white")
  .text(function(d,i) { return i+1; });

Text On each bar of a stacked bar chart d3.js

2 Answers2

Linked