A chart label is text attached to a graphical data representation. In a bar chart, labels identify each category and show the value represented by each bar. section 3.5
Build labels alongside their bars:
- Bind each data item to an SVG group rather than directly to a rectangle. section 3.5
- Translate the group vertically with the category scale so the rectangle and both labels move together. section 3.5
- Append one text element for the category and another for the value, positioning each relative to the group. section 3.5
Technology bar chart
Place the technology name at x = 96 with end alignment, then place the count four pixels after the bar using x = 100 + xScale(d.count) + 4. Set the text size and family explicitly. section 3.5
const barAndLabel = svg
.selectAll("g")
.data(data)
.join("g")
.attr("transform", d => `translate(0, ${yScale(d.technology)})`);
Inspect the group pattern that gives each bar and its labels a shared vertical position. section 3.5
