Caleydo/lineupjs

better label support for narrow columns

Closed this issue · 3 comments

  • Release number or git hash: dev

in case of very narrow columns the column label cannot be read at all. One option is to reimplement a rotated label feature. Tho, it has the big disadvantage that the whole header will get really huge.

other ideas for a non-interactive solution?

A quite simple fix is to reduce the padding-left the label for narrow columns. I posted some links how to react on the width in #341.

Another, but not necessarily the better option, is to cut out the middle, i.e. instead of Ppl know... you can write Ppl ... 2015). But this also requires quite a column width.

I also played around with the original LineUp Demo and I think that you can still use the diagonal approach.
At the moment the labels are placed diagonal when the column with is < 150px then the header is shifted down by 50px.

image

In my opinion the behavior can be applied at < 75px then the header can be shifted down by 30px.

image

Another option would be to use a steeper angle instead of the 20deg.

my use case is when the column width is reduced to a heatmap only, i.e. around 20 px.

Done. The option can be activated in the LineUp config (see config.ts).