Portion Of Label Bold - The Rest Not Bold

I'm using d3.js and the following snippet renders labels around a pie chart: text.enter() .append('text') .attr('dy', '.35em') .style('opacity', 0.01) .text(functio

Solution 1:

One solution is using a <tspan> element with a different font-weight for your d.data.amount.

Check the demo:

var svg = d3.select("svg");
var text = svg.append("text")
  .attr("x", 10)
  .attr("y", 30)
  .attr("font-weight", 700)
  .text("This is bold...")
  .append("tspan")
  .attr("font-weight", 300)
  .text(" but this is not.")

<scriptsrc="https://d3js.org/d3.v4.min.js"></script><svg></svg>

In your case, it should be something like this:

//...
.style("font-weight", 700)
.text(function(d) {
    return d.data.NAME + ": ";
})
.append("tspan")
.style("font-weight", 300)
.text(function(d) {
    return d.data.amount;
});