Custom Visual text overflow problem

[Anonymous]

Hi Community,

I am trying to create a visual where I have multiple text elements being displayed adjacent to each other. I have added the ability to control the text size of these text element through formatting options. While increasing the text size, at a certain point the text elements overlap each other. I was wondering if there is a way to fix this in the custom visual.

I came across the CSS property "text-overflow" and replace the overlapped alphabets with ellipsis on the page given below.

However I am unsure how to implement in the typescript framework of the Custom visual. 

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

I tried to add the below style options to the text element but it did not give the expected result. Is there a way to edit the css through the update function? also how can I detect when the labels are overlapping?

labels.text(dataPoint => dataPoint.category)
            .attr("x", function (d, i) {
                if (position == "Right") { return width + 160 }
                else if (position == "Left") { return 20 }
                else { return (i + 1) * 100 };
            })
            .attr("y", function (d, i) {
                if (position == "Bottom") { return height + 15 }
                else if (position == "Right" || position == "Left") { return (i + 1.7) * 15 }
                else { return 20 };
            })
            .attr("dy", "0.0em")
            .attr("text-anchor", function (d, i) {
                if (position == "Right" || position == "Left") { return "start" }
                else { return "middle" };
            })
            .attr("alignment-baseline", "hanging")
            .attr("font-family", this.settings.legend.fontfamily.value)
            .attr("font-size", this.settings.legend.fontSize.value)
            .attr("visibility", function (d) {
                if (b == true) { return "visible" }
                else { return "hidden" }
            })
            .style("fill", "Black")
            .style("white-space", "nowrap")
            .style("overflow", "hidden")
            .style("text-overflow", "ellipsis");

[paul-maessen]

Hi @Anonymous 

Maybe you can have a look at the Power BI Visuals Formatting Utils. The textMeasurementService of these utils do have a method called getTailoredTextOrDefault . This method compares the given text size to the available size and renders ellipses when the available size is smaller.

I hope this helps.

Regards

Paul

[V-lianl-msft]

Hi @Anonymous ,

You could refer to this thread:

https://community.powerbi.com/t5/Developer/make-custom-visuals-scrollable/m-p/95288 

Best Regards,
Liang
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

[Anonymous]

Hi @V-lianl-msft,

Thank you for your response, However the solution provided in thread makes the whole visual scrollable.

I want to avoid the individual text elements within the visual from colliding with each other after I increase their respective text sizes. For e.g in the legend when we increase the legend text size so much as the legend elements overlap, an ellipsis masks the overlapping alphabets with ellipsis.