search

blacklabel / grouped_categories

Grouped categories plugin for Highcharts by Black Label
http://blacklabel.github.io/grouped_categories/
Other
92 stars 74 forks source link

Overlapping category labels #87

Open nanatiris opened 8 years ago

nanatiris commented 8 years ago

Good day!

I'm trying to set up a column chart which contains long labels for some categories. In this fiddle: http://jsfiddle.net/nanatiris/kmocj37n/2/, we are configuring the x-axis labels to have a 90 degrees rotation and ellipsis when the text is too long. This causes the categories to rotate as well but it wasn't adding the ellipsis, therefore, i added a rotation: 0 for the categories. However, another issue shows wherein the categories don't wrap or have an ellipsis, causing it to overlap with other category labels.

What should be the best workaround for my use case? I've read that others have used a fixed width and text overflow in the label's style. However, I don't think that is the best solution for my use case as the chart has a dynamic data. It will be difficult to assign a universal fixed width for that.

Also, I'm looking at the autoRotationLimit of Highcharts.

When each category width is more than this many pixels, we don't apply auto rotation. Instead, we lay out the axis label with word wrap. A lower limit makes sense when the label contains multiple short words that don't extend the available horizontal space for each label. Defaults to 80.

Is it possible that this can be applied to the grouped categories too? I think that the autoRotationLimit can be a possible workaround to dynamically rotate or wrap the texts in the category levels.

Thanks in advance for the help!

KacperMadej commented 8 years ago

Hi,

If you set with of grouped labels in their style to small value, like e.g. 10, then text will be wrapped - http://jsfiddle.net/q0kns5av/

autoRotationLimit might be a good enhancement for the plugin - I will add the label for this issue.

nanatiris commented 8 years ago

Thank you for the suggestion. I'm still trying to stay away from the fixed width solution. Unless instead of a fixed width, can I do like percentage e.g. 100% of the label container (bounding box of the grid)?

Kind regards.

kayasanoori commented 6 years ago

Thank you @KacperMadej fixing the width did the work I tried % its not woking @nanatiris

smInAction commented 6 years ago

@KacperMadej how would you handle text overflow in base category column? please check link http://jsfiddle.net/q0kns5av/8/ i have updated category value that contains "portland..."

smInAction commented 6 years ago

please note more the text we add to category value, it flows out of grid.

sebastianbochan commented 6 years ago

Hi @strongbh, As a workaround you can set negative y value.

Demo:

Be aware that its really limited workaround for your specific demo.

smInAction commented 6 years ago

@sebastianbochan This is not a good workaround. if i add more and more text i need to adjust y value. check here: http://jsfiddle.net/fw16rogq/2/ text is overflowing. autoRotationLimit would have been a good option if i could use it in this case.

sebastianbochan commented 6 years ago

As I said it was really limited workaround. When we will find fix or better workaround, will let you know.

smInAction commented 6 years ago

Thanks.