Earn a 50% discount on the DP-600 certification exam by completing the Fabric 30 Days to Learn It challenge.
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.