d3.js formatting data label on clustered chart

Question

I've added some labels to my clustered bar chart but i'm unable to format them. I'm trying to apply a red background and white text for example.

Here is my fiddle

//labels

      bars.selectAll("text")
      .data(function(d) { return d.dataNew; })
        .enter().append("text")
      .style("color", "white")
      .style("background", "red")
        .attr("x", function(d) { return x1(d.name) +15  })
        .attr("y",function(d) { return y(d.value) -10 })
        .text(function(d) {return d.value})

I thought the .style property would suffice?

Also, is there a better way to force the labels to sit at the centre point of the bar? Currently i'm having to use return x1(d.name) +15 to nudge the text but it doesn't always look tidy

Regarding sitting at the center: `.style('text-anchor','middle')` — SmokeyShakers, Nov 27 '19 at 19:58
Bad news regarding the [background color](https://stackoverflow.com/questions/15500894/background-color-of-text-in-svg) — SmokeyShakers, Nov 27 '19 at 19:59

score 1 · Accepted Answer · answered Nov 27 '19 at 20:00

1

Use foreignObject instead of text. It will allow you use html formatting and style. See example here: https://bl.ocks.org/mbostock/1424037

answered Nov 27 '19 at 20:00

Stepan

1,044
1
5
9

d3.js formatting data label on clustered chart

1 Answers1