search

hski-github / spotfire-sankey-diagram

Spotfire mods visualization for Sankey diagram
MIT License
4 stars 4 forks source link

Avoid overlapping of category labels #3

Open hski-github opened 3 years ago

hski-github commented 3 years ago

In case of limited windows size or in case of long category labels, then the labels in the Sankey diagram can overlap.

image

hski-github commented 3 years ago

If values are very small also overlapping can occur and should be prevented. image

hski-github commented 3 years ago

If text labels are getting long, as a standard in Spotfire the text is truncated and three dots added. "United States of America" would be then depending on the available witdth "United States of Am...".

In CSS this can be done with setting max-width: 100px; and text-overflow: ellipsis; for the three dots ..., but not sure how this works in SVG test. const ELLIPSIS = '\u2026';

hski-github commented 3 years ago

Beside avoiding overlap of labels also the color of the label could be set depending on the background like it is done in bar charts in Spotfire with white or black font-color.

image

hski-github commented 3 years ago

https://stackoverflow.com/questions/9241315/trimming-text-to-a-given-pixel-width-in-svg/32129715

hski-github commented 3 years ago

Another example of misplaced label from #18

image

f1li commented 3 years ago

Any help here Holger? I'm still having this issue and in this case I don't see any reason of this because labels are extremely shorts.

hski-github commented 3 years ago

I have done a little change regarding rendering of labels. It does not solve the general issue of overlapping labels, but might solve your special problem here. Please check out latest version from main.

f1li commented 3 years ago

Fantastic. Now it's perfect for this issue from my side. Thanks a lot. Now I am missing only the row tooltip formatting stuff (0 decimal digit and not 2 as is now).

hski-github commented 3 years ago

Maybe small bars should not get a label e.g. if bar height is below 1em. You would be able to see the label with tooltip.

image image