14

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!! :(

Ash
  • 2,108
  • 2
  • 17
  • 22
anusreemn
  • 1,047
  • 1
  • 10
  • 24
  • 5
    Can you post your whole code and data? – martynasma Jun 26 '15 at 09:34
  • @martynasma i am using object model how to make x axis values not overlapped. Suppose it contains lot of alphabets. Is there any method for clipping extra text or hiding or make text or even sland upward – Santhucool Oct 15 '15 at 11:24
  • You may want to increase the `minHorizontalGap` (http://docs.amcharts.com/3/javascriptcharts/CategoryAxis#minHorizontalGap) or rotate labels using `labelRotation` (http://docs.amcharts.com/3/javascriptcharts/CategoryAxis#labelRotation) – martynasma Oct 15 '15 at 11:50

1 Answers1

0

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

jignesh
  • 1,639
  • 1
  • 16
  • 18