1

I'm developing an application with Ext JS 4.1.3. The application processes data and shows a chart on basis of the data.

The problem is:
In the case, where there are more than 80-90 entries on the chart (on x-Axis), some marker names are omitted. So, instead of the markers names it shows partially empty positions. Although there is still a lot of space.

Here is a screenshot:

enter image description here

And the questions are:

  • I made font of the markers smaller already. Maybe there is a way to reduce the padding between the marks?
  • How can I force the ExtJs chart to show all entries? Can I change the setting of the chart (or x-Axis) to display all the markers names (regardless of the number of the entries) ?
  • Are there other solutions to this problem?

Thanks!

UPD1. This is somehow related to css class " x-hide-visibility" and hideMode.

  • How can I disable the hideMode of labels?

UPD2. I have found the following solution. But it made the chart slow (not critical, but..). Maybe someone knows other solution? There must be a way to switch off the option ('hideMode') in advance.

for (var i = 0; i< chart.axes.items[0].labelGroup.items.length; i++){
    chart.axes.items[0].labelGroup.items[i].el.removeCls(' x-hide-visibility');
}
ERG
  • 141
  • 2
  • 9

2 Answers2

1

I had the same problem and solved the hidden labels issue by adding this line of css to a stylesheet.

svg text.x-hide-visibility {visibility: inherit!important;}

It would be nice if there was some configuration option on the series or axes to control this behavior. Hope it works for you!

imranR
  • 11
  • 2
  • I thank you for the answer. You've got a similar solution. There is another variant from Sencha Forum: http://www.sencha.com/forum/showthread.php?259151-Column-Chart-not-displaying-all-markers-names-on-the-Category-Axis&p=949823&viewfull=1#post949823 – ERG Mar 28 '13 at 10:35
0

I had the same problem.

Please just add the following line:

chrChart1.ChartAreas(0).AxisX.Interval = 1

Victor Barcellos
  • 1
  • 2