I’ve run into an issue while using ExtJS 4.0.7. I’m trying to display a

Question

0

Asked: June 1, 20262026-06-01T05:14:55+00:00 2026-06-01T05:14:55+00:00

I’ve run into an issue while using ExtJS 4.0.7. I’m trying to display a

0

I’ve run into an issue while using ExtJS 4.0.7.

I’m trying to display a chart with two series on a Numeric/Category Chart. The chart displays correctly in Firefox, but while using Chrome (18.0.1025.142) the x axis labels are either all stacked upon each or else (when using rotate) rendered behind the chart in the specified angle. Any ideas would be appreciated.

Screen shot in Firefox:
Firefox render of chart

Screen Shot in Chrome:
Chrome render of chart

And the code that’s used to generate both:

    Ext.require(['Ext.chart.*']);
    Ext.onReady(function() {
    var iChartWidth     = 800;                  //  Defines chart width
var iChartHeight    = 550;                  //  Defines chart height
Ext.define('RulesCreatedModel',{
    extend:'Ext.data.Model',
    fields:[
        {name:'sHourName',  type:'string'},
        {name:'User_2',     type:'number'},
        {name:'User_1',     type:'number'},
    ]
});
var RulesCreatedStore = Ext.create('Ext.data.Store',{
    id:'RulesCreatedStore',
    model:'RulesCreateModel',
    fields: [ 'sHourName','dayNum','hour','User_2','User_1'],
    data:[{
        'sHourName':'3pm',      
        'User_1':82,
        'User_2':56
    },{
        'sHourName':'4pm',
        'User_1':39,
        'User_2':44
    },{
        'sHourName':'5pm',
        'User_1':80,
        'User_2':14
    },{
        'sHourName':'6pm',
        'User_1':55,
        'User_2':0,
    },{
        'sHourName':'7pm',
        'User_1':36,
        'User_2':0,
    },{
        'sHourName':'8pm',
        'User_1':66,
        'User_2':0
    },{
        'sHourName':'9pm',
        'User_1':39,
        'User_2':0,
    },{
        'sHourName':'10pm',
        'User_1':0,
        'User_2':0
    },{
        'sHourName':'11pm',
        'User_1':0,
        'User_2':0
    },{
        'sHourName':'12am',
        'User_1':0,
        'User_2':0
    },{
        'sHourName':'1am',
        'User_1':0,
        'User_2':0
    },{
        'sHourName':'2am',
        'User_1':0,
        'User_2':0
    },{
        'sHourName':'3am',
        'User_1':0,
        'User_2':0
    },{
        'sHourName':'4am',
        'User_1':0,
        'User_2':0
    },{
        'sHourName':'5am',
        'User_1':0,
        'User_2':0
    },{
        'sHourName':'6am',
        'User_1':0,
        'User_2':0
    },{
        'sHourName':'7am',
        'User_1':0,
        'User_2':1
    },{
        'sHourName':'8am',
        'User_1':0,
        'User_2':99
    },{
        'sHourName':'9am',
        'User_1':0,
        'User_2':28
    },{
        'sHourName':'10am',
        'User_1':0,
        'User_2':28
    },{
        'sHourName':'11am',
        'User_1':0,
        'User_2':153
    },{
        'sHourName':'12pm',
        'User_1':0,
        'User_2':58
    },{
        'sHourName':'1pm',
        'User_1':0,
        'User_2':42
    },{
        'sHourName':'2pm',
        'User_1':20,
        'User_2':10
    }]
});
Ext.create('Ext.chart.Chart',{
    id:         'RulesWrittenChart',
    renderTo:   'StatCharts_Display',
    width:      iChartWidth,
    height:     iChartHeight,
    animate:    true,
    store:      RulesCreatedStore,
    axes:       [{
        type:       'Numeric',
        position:   'left',
        fields:     ['User_2','User_1'],
        title:      'Rules Written',
        grid:       true
    },{
        type:       'Category',
        position:   'bottom',
        fields:     ['sHourName'],
        title:      'Hour',
        grid:       false,
        label: {
            rotate: {
                degrees: 315
            }
        }
    }],
    series: [{
        type:       'line',
        axis:       'left',
        xField:     'sHourName',
        yField:     'User_2',
        highlight:  {
            size:   3,
            radius: 3
        }
    },{
        type:       'line',
        axis:       'left',
        xField:     'sHourName',
        yField:     'User_1',
        highlight:  {
            size:   3,
            radius: 3
        }
    }]
});
    });