CODEWITHSUNDEEP
javascriptd3.jsgraph
Akshay Shinde
Akshay Shinde

Reputation: 141

Creating labels on STACKED GROUP bar chart in d3.js

I have a stacked group bar chart. Every bar in group is having stacked columns . So I need to print labels(text) on every bar in the chart. But I am able to print one label per group. My code looks like this,

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

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

project_stackedbar.selectAll("rect")
    .data(function (d) { return d.columnDetails; })
    .enter()
    .append("rect")
    .attr("width", x1.rangeBand())
    .attr("x", function (d) {
        return x1(d.column);
    })
    .attr("y", function (d) {
        return y(d.yEnd);
    })
    .attr("height", function (d) {
        return y(d.yBegin) - y(d.yEnd);
    })
    .style("fill", function (d) { return color(d.name); });

project_stackedbar.append("text")
.attr("x", function (d) { return x1(d.column) })
.attr("y", function (d) {
   return y(d.yEnd) - 6;})
.text(function (d) { return (y(d.yEnd)); } );

Thanks in advance.

Upvotes: 1

Views: 734

Answers (1)

Alex_B
Alex_B

Reputation: 848

You have to assign which data you want to print in terms of text labels by doing something like the following:

project_stackedbar.selectAll("text")
.data(function (d) { return d.columnDetails; })
.enter()
.append("text")
.attr("x", function (d) { return x1(d.column) })
.attr("y", function (d) {
    return y(d.yEnd) - 6;})
.text(function (d) { return (y(d.yEnd)); } );

the x and y positions may need to be adjusted.

Hope this helps.

Upvotes: 1

Related Questions