Hi Sunil, Sanjoy and team:
CanvasJS is a joy to use. Really appreciate all the great work you’ve made. The level of detail, the usability… wonderful.
My question:
IndexLabels overlap on all types of graphs. How would you suggest to solve this?
Example:
http://jsfiddle.net/njb7ry8w/
– This is typical of the actual graphs we will want to display. Many points, only a few labelled.
– But the IndexLabels run over other points and run over each other.
I understand that, depending on the positions of the points, some overlap between an IndexLabel of one point and the marker of another point is inevitable. And some creative use of background-colors and alpha-opacity can help. But what really is a problem is when two IndexLabels overlap each other. In the example graph, “point 46” and “point 54” just become a blob of text that’s illegible.
What I’ve tried:
- Best solution I’ve created so far is to remove all IndexLabels from the main series. Then make another series of dataPoints just for the points which have IndexLabels, giving them no marker but only an IndexLabel. Then try to manually calculate an offset for each IndexLabel point which will fit it well.
- It’s definitely an improvement, but it’s a lot of guesswork. Distance from other IndexLabels, font-size, text-align (canvasJS does center-align for the text, but depending on its position on the graph, sometimes right, sometimes left could be better)… all that is a big guess and I’ve had trouble getting it accurate.
- I’ve also tried breaking words, wrapping onto new lines… but that opens another set of problems about hyphenation, where to break phrases/data labels, how to calculate the break-point in px, etc. At least in a first attempt, I couldn’t get good results with this method.
In this comment from 2013, Sunil wrote that indexLabels would have autoFit in v1.4, but I haven’t found this option and haven’t been able to make it work on my own.
It’s quite an issue for us: the chart is unusable as it is now. I’m happy to do a lot of the calculations for offset positions manually, but I haven’t been able to make it work on my own, so finally I’m writing to you to see what you’d suggest.
Thanks,
Jason
.
