Auto size margins and category labels
Instead of setting the margins as an option, the required margin should be computed based on the size of the axis labels. Also add non-collision detection for category labels.
Version 2.1
-
wee_rita commented
I have an A4 Sheet of labels which contains 2 across and 4 down (8 labels) can you tell me the sizes I have to enter as any I enter is incirrect?
-
David Gray commented
Hi Torstein,
This feature is the one outstanding feature that is preventing us from getting a commercial license for Highcharts for use with our platform - so I'm very eager and happy to see this being added!
However, in it's current incarnation it still falls a little short of our requirement, and I was hoping you'd take a moment to look over the ideas outlined in my forum post http://highslide.com/forum/viewtopic.php?f=9&t=8380
One of our biggest problems is we dynamically generate a large number of charts into fluid containers, and the charts being generated quite often have very long category labels. - almost all the demos and examples seem to assume people are using short labels or something with a pattern (such as dates, or times) and thus you can "skip" some labels and it's still readable.
In our case, we have lots of categories that quite frequently have no pattern to them, so they must all be displayed, and they are often long. We could before rendering crop down the category sizes etc, but as the container is fluid that causes problem. In my forum post I outline a method that I think would be a huge benefit to Highcharts - and I can confirm that I've yet to find another charting solution that can achieve this - including the leading Flash implementations.
Would love to hear your thoughts.
-
It's going into regression testing phases now. The beta is to be expected by the end of this week.
-
Andre Booysen commented
Hi. Torstein
Sorry for the delay in responding, I went away with the fam for a few days.Horizontal yAxis titles overlapping values:
http://jsfiddle.net/aUec6/1/xAxis categories overlapping title:
http://jsfiddle.net/TTMZu/1/ -
Rob Messer commented
Torstein, thanks for your reply. It looks like the margin option for the legend will accomplish what I was trying to do -- before it looked like the legend was too close to the chart, so I wanted to move the legend down, but without having to also change some other parameters to make space for it.
And so if the changes in 2.1 allow that sort of thing, then great. I want to be a bit lazy as a developer, and just be able to set up labels and scales and such by my dynamic data, without having to worry about how big the text is. And I really want to avoid adding calculations to my code to size things. Instead I want to tell highcharts to use a certain container and have it fit everything in that container.
On that note In your latest example the final X axis label "Dec" is cut-off. In my ideal world it wouldn't be necessary to add margins for that kind of thing either. Thanks.
-
nelsou.com commented
I took a look to the alpha version (2.1) and I'm impressed. Any date for the release ?
It fix a lot of my bugs, specially the "auto size margins ..." problem.
Thank you. -
Andre,
It would be great if you set up a jsFiddle example displaying any glitches that you should find, then we'll be able to fix it before the final release.
-
Robert,
By setting y to 10 you say that the legend should be ten pixels outside of the chart, so I can't see that this is wrong behaviour. Setting y to -10 would make more sense in this case. Also, there is a new option, margin, for the legend itself to determine the distance to the chart. And there is another option, floating, that you can set to true to ignore the legend's impact on margins. See http://jsfiddle.net/hAGkQ/4/.
-
Rob Messer commented
Agreed, I like the concept of setting space, akin to padding in an html element. Ideally what I'd like to be able to do is supply the chart object with data and legends and all, and then let it calculate everything and know that I won't have part of a legend or scale or some other element out of the drawing area.
Your new pre-release version at http://jsfiddle.net/PPMtr/ seems closer, although it would be nice if it were possible to say move the legend down and not have to add margin for that. For example I forked your example here: http://jsfiddle.net/hAGkQ/. All I did was move the legend down and it gets clipped. But looks like you are on the right track.
-
Andre Booysen commented
Hi Torstein
Looks great, my tests ended up with the following (IE 8): 2 Y-axis’s on the left, 4 Y-axis’s on the right, 37 series, X-axis title, very large numbers , long category names and no border .
1.Number formatting is cool
2.Resizes very nicely
3.Vertical category labels goes over the line but changing the alignment to “Left” sorts this out.
4.Long Vertical category label like “July 1234567890” overlaps the x-Axis Title but adding a margin to the title fixes this.
5.Legend spaces & sizes nicely
6.Horizontal Y-axis title overlaps the numbers (not that I will use it like this)I’m going to revert my code back and try it with this version (I know it’s not a release yet) and if it works nicely I’ll buy a license.
-
Robert, see this setup, http://jsfiddle.net/PPMtr/, using the code for the next version. It introduces spacing as opposed to margins. Please let us know what you think.
-
Rob Messer commented
Agreed, this is really needed when building charts with dynamic labels. Really margins: [0,0,0,0] should mean include all of the content such as the axis labels and titles and such, and then have zero margins around that, not the current meaning which simply chops all labels. I want to fit a dynamic chart exactly into a space, and it is nearly impossible to size the margins correctly as-is.
-
Andre Booysen commented
Awesome product, started to incorporate it into my project which is a dynamic jQuery OLAP Cube browser but without this feature it was proving a bit difficult to get it to display nicely without user intervention. I did manage to sort of hack it into the jQuery UI.Layout Plug-in (should be the first link in google if you search) , might be worth looking into.
-
Rob commented
It would be great to have this built in instead of trying to manage it manually.
-
Nothing set, but it could be within some months.
-
nelsou.com commented
Any date for the non-collision detection ?
-
John commented
Big thumbs up to his idea. I have rotated category labels, which means many of them are truncated because they are too long for the space. The ability to extend the space for the x axis category labels downwards would be extremely welcome.