ExtJS 4 Chart Axis Display Issue in Chrome
- by SerEnder
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:
Screen Shot in Chrome:
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
}
}]
});
});
