topic Custom Visuals- How to move text when resizing chart in Developer

Custom Visuals- How to move text when resizing chart

AmiraB — Wed, 25 Jan 2017 21:23:45 GMT

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

Re: Custom Visuals- How to move text when resizing chart

AmiraB — Thu, 26 Jan 2017 18:08:26 GMT

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"
            });

Re: Custom Visuals- How to move text when resizing chart

v-chuncz-msft — Fri, 27 Jan 2017 09:46:44 GMT

@AmiraB,

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.