Labels not showing though it fits both angular or radial

[ank094]

Describe the bug Labels not showing though it fits both angular or radial

To Reproduce Steps to reproduce the behavior: Create Sunburst chart using react kapsule

Expected behavior Labels that fits should be shown Screenshots sandbox link https://codesandbox.io/s/distracted-fire-01rz1q?file=/src/App.js

I am trying to display label for notice state investing children but i could inspect and see display :none applied to both angular and radial class. If i remove display: none, it shows perfectly

[vasturiano]

@ank094 thanks for reaching out.

The algorithm the determines the space necessary to fit a certain text is intentionally conservative so that it doesn't run into cases where the labels overflow their container. It also only takes into account the number of characters, not the type. Because of this you can run into cases where even though a piece of text practically fits, the algorithm decides that it's safer not to. This tends to happen with text heavy on thin characters, like "i" and "t", which I believe is the specific case in your example: "notice state investing".

[ank094]

@vasturiano Thanks for answering. I could see multiple instances where small significant space was left both side of the text but still was not invisible. Just wondering if algorithm can be little modified to adjust those.

Would it be a good idea to introduce text-overflow:ellipsis property incase it seems to be overflowing. I presume this makes UX better. Reference :https://www.highcharts.com/docs/chart-and-series-types/sunburst-series

[vasturiano]

@ank094 the text-overflow css property only works in standard HTML I'm afraid. There's no built-in equivalent for SVG elements such as these. You have to turn to JavaScript for that.

Making the algorithm more aware of the char types will have an impact on the performance of chart, so it's a trade-off I'm a little reluctant to introduce.

If you're curious about the code that does this, here it is: https://github.com/vasturiano/sunburst-chart/blob/d3b2da2ba8e95a36377ec30f9893bd05b89a58f7/src/sunburst.js#L323-L336

[ank094]

@vasturiano Thanks for responding. Do we have any property or props by which we can know if labels will be hidden (does not fit) and then we can truncate it with three dots appending addition using external function.

Suggestion : Instead of complete hiding due to characters length, If a label doesn't fit, keep removing text from it until it does with ... appended at last

[vasturiano]

@ank094 I've just added a new method that allows you to handle these cases in a custom way. The method is called handleNonFittingLabels. Have a look at the docs for usage syntax.

You can see it in action doing label truncation in this example.