PDA

View Full Version : Chart theme axis title issue



alphadogg
9 Aug 2011, 12:58 PM
Ext.chart.theme.Base sets axisTitleBottom as:


axisTitleBottom: {
font: 'bold 18px Arial',
fill: '#444'
}


However, the font choice seems to be ignored on IE9. Works on FF5. In fact, the third option is ignored. If I define my own theme and flip around the font property items, like so, I get the Arial font, just not bolded.



axisTitleBottom: {
font: '18px Arial bold',
fill: '#444'
}


This may be a prevalent issue and affect other textual elements. Have not tested that though.

Using v4.0.5

DanSchenck
22 Aug 2011, 11:39 AM
You apparently have to explicitly define various font attributes to get them to work correctly. The example appears to be bogus. 'bold 18px Arial' is an invalid style specification. Here is an example that works:


Ext.chart.theme.ptkWhite = Ext.extend(Ext.chart.theme.Base, {
constructor: function() {
Ext.chart.theme.ptkWhite.superclass.constructor.call(this, {
axis: {
stroke: 'rgb(8,69,148)',
'stroke-width': 1
},
axisLabel: {
fill: 'rgb(8,69,148)',
font: '12px Arial',
spacing: 2,
padding: 5,
renderer: function(v) { return v; }
},
axisTitleLeft: {
font: '18px Arial',
'font-family': 'Calibri, Arial',
'font-weight': 'bold'
},
axisTitleBottom: {
font: '18px Arial',
'font-family': 'Calibri, Arial',
'font-weight': 'bold'
}
});
}
});