Ngx-charts: Legend Text Overflow

[dankrajnak]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior

Long text in the legend component is cut off by the legend container without ellipsis. The span element in which the text sits is set to 100% of the container and doesn't account for the color icon next to it.

Expected behavior

Long text that cannot fit in the legend box should end with an ellipsis. The span element (selector is .legend-label-text) should have a width of calc(100% - 15px), accounting for the color icon next to it.

Reproduction of the problem

Go to the documentation for bar graphs and change the data to create a long line of text in the legend.

• ngx-charts version: 6.0.0
  

• Browser: [ Chrome 59 | Firefox 54 | Edge 40 ]
  

[roydekleijn]

is this related?

If I remove: overflow: auto then it looks fine

[davidavdav]

I have the opposite: legend labels are always truncated to ellipsis. No matter how wide the space for the graph is.

[MartinoMensio]

@roydekleijn I have the same issue. Did you manage to solve it in some ways?

[homj]

The fix causes issues with safari. Using width: 100% for legend labels fixes the safari issue.