ExtJS4 configuring axis step in line chart

Question

I'm using ExtJS 4 to draw a very simple line chart:

Ext.create('Ext.Panel', {
        width:  '100%',
        height: 300,
        hidden: false,
        renderTo: Ext.Element.get('container'),
        layout: 'fit',
        items: {
            xtype: 'chart',
            animate: false,
            store: plots[title]['instances'][instance]['store'],
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['samples'],
                minimum : minimum,
                maximum : maximum,
                grid : true,
                title: plots[title]['yLabel']
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['time'],
                title: plots[title]['xLabel']
            }],
            series: [{
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                xField: 'time',
                yField: 'samples',
                showMarkers: false,
                style: {
                    fill: '#18428E',
                    stroke: '#18428E',
                    'stroke-width': 3
                },
            }]
        }
    });

The problem is that the time series in the x axis is very long. As result the labels tend to overlap. Is there a way to visualize only some labels?

I remember that this was the default behavior with ExtJS 3.

The series in the x-axis is a date derived from a timestamp.

Eric Eric · Accepted Answer · 2011-12-17T02:07:38

First of all, the width property must be a number. '100%' as a string doesn't work. This may or may not be related to your problem.

Second, you may find using a Time axis instead of a Category axis more helpful. Category works better for discrete values like days of the week, or months of the year, rather than time values. The Time axis features a config "step" which should allow you to control the density of your labels.

And to save you a headache, define your "axis" config in the line series as an array ["left", "bottom"]. It's undocumented as far as I'm aware, but only defining one axis means the bounds of the other axis will not be respected properly.

ExtJS4 configuring axis step in line chart

1 Answers