Prevent categoryAxis labels from overlapping in LineChart

Question

Using the below options doesn't help me prevent my CategoryAxisLabels from overlapping in line-chart when my browser is resized.

categoryAxis.autoGridCount = true;
categoryAxis.minHorizontalGap = 100;
categoryAxis.gridPosition = "start";
categoryAxis.equalSpacing = false;
categoryAxis.parseDates = false;
chart.validateNow();

I trigger these functions on the $(wndow).on('resize', function() {...}); event.

Please note I also have a custom labelFunction to format the axis-labels.

My Result : It autoGridCounts from 476px to lower, but above it, all the categoryAxis label values appear on x-axis and overlap upon each other in a most disgraceful way. :(

Can someone please help me out. Really stuck!! :(

Answer 1

to over come this issue you can rotate Category axis labels. you need to set rotate angle and rotate cout for category axis.

"autoRotateAngle": 90,

"autoRotateCount": 1

(1)autoRotateAngle=>Angle of label rotation, if the number of series exceeds autoRotateCount and parseDates is set to false.

(2)autoRotateCount=>If the number of category axis items will exceed the autoRotateCount, the labels will be rotated by autoRotateAngle degree. Works only if parseDates is false.

For more details check out this url. https://docs.amcharts.com/3/javascriptcharts/CategoryAxis

Demo