Too many labels

[sbsbsb]

https://jsfiddle.net/w2pf473s/

The above fiddle shows what’s happening. The chart has two data points, where the x value is a timestamp and the y value is an integer. For larger numbers of points, CanvasJS produces a relatively reasonable number of labels. But for small numbers, it adds way too many labels, and they overlap each other at some sizes.

[Indranil]

@sbsbsb,

labelAutoFit wraps and/or rotates and/or reduces font size of the label when they are too long and overlaps, it finds the best-fit and automatically manages label overlapping. Setting it to true(defaults to true) should work fine in your case.

Also, if you are passing x-value as a timestamp to display date time over axis X, please set xValueType to “dateTime”.

___________
Indranil Deo
Team CanvasJS

[sbsbsb]

Hi, Indranil. Thanks for your reply!

In the real chart, I’m using a custom label, so xValueType makes no apparent difference. I’ve left it out of the fiddle for simplicity since the formatter we use is configurable and injected from outside the chart component. At any rate, the same problem happens regardless of the exact format of the label.

I’m also hesitant to use labelAutoFit because it appears to make the margin unpredictable. To give you an idea of why this is a problem for us, we embed this chart in a container where the graph is completely flush with the borders on the left and right. Since we don’t have direct control over the graph margins, I actually measured what they were and simply applied a negative margin in the CSS to obtain an effective margin of zero. This sort of simple hack won’t work if I don’t know what the margin is a priori. To my mind, this is a problem with the API design. Deciding the amount of margin should be decoupled from the algorithm that auto-spaces the labels.

[Indranil]

@sbsbsb,

labelAutoFit considers parameters like the width of the chart, number of labels to be shown, the width of the labels, etc. and sets labelAngle, labelFontSize etc. to avoid the overlapping of labels.

Since we don’t have direct control over the graph margins, I actually measured what they were and simply applied a negative margin in the CSS to obtain an effective margin of zero. This sort of simple hack won’t work if I don’t know what the margin is a priori. To my mind, this is a problem with the API design. Deciding the amount of margin should be decoupled from the algorithm that auto-spaces the labels.

Can you please create a JSFiddle reproducing the above scenario and brief us further about the same.

___________
Indranil Deo
Team CanvasJS