Join us at FabCon Atlanta from March 16 - 20, 2026, for the ultimate Fabric, Power BI, AI and SQL community-led event. Save $200 with code FABCOMM.
Register now!The Power BI Data Visualization World Championships is back! Get ahead of the game and start preparing now! Learn more
I tried adding text to the Sample Bar Chart code
bars.enter()
.append("text")
.classed("label",true) //or "label"
.attr ("y",d => yScale(<number>d.value)+1)
.attr ("x",d => xScale(d.category)+xScale.rangeBand()/2)
.attr("text-anchor", "middle")
// .attr("font-size", "10000000.5em")
.attr("fill", "red")
.text(d => <string>d.value)
;
The issue is this text do not move when I resize the chart
Solved! Go to Solution.
This solved the issue .
let text = this.barContainer.selectAll('.bar').data(viewModel.dataPoints);
text.enter()
.append('text')
.classed('bartext', true)
.text(d => <string>d.value2);
text.attr({
y: d => height - 15,
x: d => xScale(d.category) + xScale.rangeBand() / 2,
'text-anchor': "middle",
fill: "red"
});
This solved the issue .
let text = this.barContainer.selectAll('.bar').data(viewModel.dataPoints);
text.enter()
.append('text')
.classed('bartext', true)
.text(d => <string>d.value2);
text.attr({
y: d => height - 15,
x: d => xScale(d.category) + xScale.rangeBand() / 2,
'text-anchor': "middle",
fill: "red"
});
Glad to hear that you've solved this problem and thank you for sharing the solution. This might be beneficial to other community members, you could help mark it as answer.
The Power BI Data Visualization World Championships is back! Get ahead of the game and start preparing now!
| User | Count |
|---|---|
| 4 | |
| 3 | |
| 2 | |
| 1 | |
| 1 |
| User | Count |
|---|---|
| 4 | |
| 4 | |
| 4 | |
| 3 | |
| 3 |