Amcharts category axis labels overlap

Question

I am using amCharts javascript charts version 3 and I have also tried the latest version too.

The problem is: I have a lineChart with scrollBar , the categoryAxis of that chart has more than even 100 records so at first rendering it just shows 5-6 and then I zoom to view more categoryAxis label. So far so good.

But when I zoom, the labels on categoryAxis overlaps so everything looks messed up actually its due to the increase in the number of grids after zooming.

I have tried categoryAxis.autoGridCount but got no luck with it.

Please help, Thanks in advance.

Answer 1

I had the same problem with my Category axis which contains dates. I resolved it and this is my solution: The most important part is that parseDate is set to false

categoryAxis.parseDates = false;

You have to set categoryAxis.autoGridCount to true because it's important to set number of gridCount automatically, acoarding to the axis size.

categoryAxis.autoGridCount = true;

then

categoryAxis.minHorizontalGap = 100;

That creates space between dates as some guy mentioned.

My usage is:

    //Category Axes
    var categoryAxis = chart2.categoryAxis;
    categoryAxis.gridAlpha = 0;
    categoryAxis.autoGridCount = true;
    categoryAxis.minHorizontalGap = 100;
    categoryAxis.gridPosition = "start";
    categoryAxis.equalSpacing = false;
    categoryAxis.parseDates = false;
    categoryAxis.minPeriod = "DD";
    categoryAxis.startOnAxis = true;
    categoryAxis.axisColor = "#dcdcdc";
    categoryAxis.axisThickness = 1;
    categoryAxis.showLastLabel = true;

Answer 2

Try using categoryAxis.renderer.minGridDistance property. This will tell the chart to not places labels/grids closer than the said value in pixels. Increasing these numbers will mean likely sparser grid lines and related labels. Decreasing will probably result in denser grid/labels.

Example use: categoryAxis.renderer.minGridDistance = 40;

More information: Amcharts documentation for the same

Answer 3

I know that this is quite an old question but it is a problem that I have recently encountered and I could not find a satisfactory solution online. The problem with rotating the category labels is that it can shrink the chart to much!

The solution I came up with was to vertically stagger the category labels using a label formatter.

My formatter

var up = false;

function formatLabel(value, valueString, axis){
    if(up) {
        axis.labelOffset=0;
    }
    else {
        axis.labelOffset=25;
    }
    up=!up;

    return value;
}

There is some info about setting up a formatter here

https://amcharts.zendesk.com/entries/23473053-Formatting-axis-labels-using-custom-function

But basically all you have to do is set the labelFunction on the axis

"categoryAxis": {
    "labelFunction":formatLabel
}

Answer 4

The autoGridCount should be set to true. From your description I guess you have quite a lot text in your axis labels. I could recommend increasing minHorizontalGap to 100 or so (default is 75) for your categoryAxis. If this won't help I'd need to see your chart.