Showing results for 
Search instead for 
Did you mean: 
kstachkunas Regular Visitor
Regular Visitor

When I used a function to wrap y axis labels Points no longer lining up



This is what our custom visualization looks like ... with the word wrap





  I  am still learning on all this ... 


    You can see the more labels that we wrap the more unaligned it becomes.  We are applying a wordwrap function to the label during the code ...  


the wordwrap function we found on several d3..   ( I copied it below ) ... 


Is there a better way , or how do you compensate when you are plotting points when you have word wrap and can be multiple lines 




  this.yAxis.attr('transform', 'translate(' + ScatterChart.Config.margins.left + ', 0)')
      //Set the font size based upon the size of the container
     .style('font-size', function () { return d3.min([height, width]) * ScatterChart.Config.axisFontMultiplier + "px" })
     .attr('class', 'y axis')
    .call(this.wrap, ScatterChart.Config.margins.left - 50);
    .attr("transform", function (d) { return "translate(" + xScale(d.category) + "," + yScale( + ")"; })

   the above I believe is how we are deciding where to plot ... so I think I have to do something to the yscale... 


 I modified the wrap to subtract from the x margin , to allow the labels to not be right at the axis line.  I had tried the text-anchor function with start , and it did no do anything , so this worked ... not best solution ..   wrap does not work in focus mode


 private wrap(text, width) {
            text.each(function () {
                var text =,
                    words = text.text().split(/\s+/).reverse(),
                    line = [],
                    lineNumber = 0,
                    lineHeight = 1.1,  // 1.1 , // ems
                    y = text.attr("y"),
                    dy = parseFloat(text.attr("dy")),
                    tspan = text.text(null).append("tspan").attr("x", -20).attr("y", y).attr("dy", dy + "em");
                while (word = words.pop()) {
                    tspan.text(line.join(" "));
                    var node: SVGTSpanElement = <SVGTSpanElement>tspan.node()
                    //This computes the pixel length.
                    var bandPixLength = node.getComputedTextLength()
                    if (bandPixLength > width + 10) {
                        tspan.text(line.join(" "));
                        line = [word];
                        //   lineHeight =  2 ; 
                        tspan = text.append("tspan").attr("x", -20).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);


   Any ideas , on how to match the plotted y points to center when labels are word wrapped ...  

Community Support Team
Community Support Team

Re: When I used a function to wrap y axis labels Points no longer lining up



You may try to use CSS3 word-wrap property or a percent value.

Community Support Team _ Sam Zha
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Helpful resources

New Ranks and Rank Icons in 2020

New Ranks and Rank Icons in 2020

Read the announcement for more information!

New Kudos Given Badges Coming

New Kudos Given Badges Coming

We're rolling out new Kudos Given badges. Find out how many Kudos you've given.

November 2019 Community Highlights

November 2019 Community Highlights

Get an overview of the events and great community content from November.

Power Platform World Tour

Power Platform World Tour

Find out where you can attend!

Top Solution Authors
Top Kudoed Authors (Last 30 Days)