Column Chart not displaying all markers names on the 'Category'-Axis

[nexSencha]

Hi All,
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.

The questions are:
- I made the font of the markers smaller already. Maybe there is a way to reduce the padding between the marks?
- How can I force the 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?


UPD1. This is somehow related to css class " x-hide-visibility". How can i disable the hideMode of labels?

UPD2. I have found the following solution. But it made the chart slow. 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'); 
} 

Here is a screenshot:

[scottmartin]

An example would be helpful. In the case of the hidden labels, I would think an override of the function that draws the labels would be better than looping through the items to remove a CSS.

Scott.

[nexSencha]

Thank you, Scott.

An example would be helpful.

This can be easily simulated with any chart. You just have to minimize the chart window.
From a certain size the single markers will disappear. Just make the chart window small.

For example:

http://dev.sencha.com/deploy/ext-4.0...harts/Bar.html

screenshot2.jpg

[nexSencha]

This also happens with other diagrams. You just have to minimize the chart window so, that "category"-axis is going smaller (NOT numeric)
Examples:
http://dev.sencha.com/deploy/ext-4.0...ts/Column.html
http://dev.sencha.com/deploy/ext-4.0...roupedBar.html

[nexSencha]

I would think an override of the function that draws the labels would be better than looping through the items to remove a CSS.

That's what I thought too. I have looked the source code (Ext.chart.Label). There is an array called 'hides', where the labels are pushed , if they need to be hidden.

But, I think there must be another option to turn it off:
config : {hideMode: 'visible'} or something like this .

[scottmartin]

I moderated your posts ..

As for the chart .. in the example with vertical labels, you could use the following override
For chart with labels on the bottom axis, you would override drawHorizontalLabels

Ext.define('Ext.chart.axis.override.Axis', {
    override: 'Ext.chart.axis.Axis',

    drawVerticalLabels: function () {
        var me = this,
            inflections = me.inflections,
            position = me.position,
            ln = inflections.length,
            chart = me.chart,
            insetPadding = chart.insetPadding,
            labels = me.labels,
            maxWidth = 0,
            max = Math.max,
            floor = Math.floor,
            ceil = Math.ceil,
            axes = me.chart.axes,
            gutterY = me.chart.maxGutter[1],
            bbox, point, prevLabel, prevLabelId,
            hasTop = axes.findIndex('position', 'top') != -1,
            hasBottom = axes.findIndex('position', 'bottom') != -1,
            adjustEnd = me.adjustEnd,
            textLabel, text,
            last = ln - 1, x, y, i;

        for (i = 0; i < ln; i++) {
            point = inflections[i];
            text = me.label.renderer(labels[i]);
            textLabel = me.getOrCreateLabel(i, text);
            bbox = textLabel._bbox;

            maxWidth = max(maxWidth, bbox.width + me.dashSize + me.label.padding);
            y = point[1];
            if (adjustEnd && gutterY < bbox.height / 2) {
                if (i == last && !hasTop) {
                    y = Math.max(y, me.y - me.length + ceil(bbox.height / 2) - insetPadding);
                }
                else if (i == 0 && !hasBottom) {
                    y = me.y + gutterY - floor(bbox.height / 2);
                }
            }
            if (position == 'left') {
                x = point[0] - bbox.width - me.dashSize - me.label.padding - 2;
            }
            else {
                x = point[0] + me.dashSize + me.label.padding + 2;
            }
            textLabel.setAttributes(Ext.apply({
                hidden: false,
                x: x,
                y: y
            }, me.label), true);
            
            if (i != 0 && me.intersect(textLabel, prevLabel)) {
                if (i === last && prevLabelId !== 0) {
//                    prevLabel.hide(true);
                } else {
//                    textLabel.hide(true);
                    continue;
                }
            }
            prevLabel = textLabel;
            prevLabelId = i;
        }

        return maxWidth;
    }


});

Scott

[nexSencha]

Thanks Scott for your help! Your solution works very well.