PDA

View Full Version : [CLOSED] Change font style of chart Legend



jchau
Apr 29, 2014, 2:40 PM
I created a custom chart theme in Javascript but not sure how to set the font style for legend items.


Ext.define('Ext.chart.theme.Strata', { extend: 'Ext.chart.theme.Base',


constructor: function (config) {




var fontColor = '#434343';


this.callParent([Ext.apply({
legend: {
'boxStrokeWidth': 0,
'stroke-width': 0,
font: 'bold 11px Century Gothic'
},
axis: {
fill: fontColor,
stroke: fontColor,
font: '12px Century Gothic'
},
title: {
fill: fontColor,
font: 'bold 12px Century Gothic'


},
axisTitleLeft: {
fill: fontColor,
font: 'bold 12px Century Gothic'
},
axisTitleRight: {
fill: fontColor,
font: 'bold 12px Century Gothic'
},
axisTitleBottom: {
fill: fontColor,
font: 'bold 12px Century Gothic'
},
axisLabelLeft: {
fill: '#444',
font: '11px Century Gothic'
},
axisLabelBottom: {
fill: '#444',
font: '11px Century Gothic'
},
axisTitleTop: {
fill: fontColor,
font: 'bold 11px Century Gothic'
},
series: {
'stroke-width': 3
},
marker: {
'stroke-width': 0,
fill: '#000',
radius: 4,
size: 4
},
colors: ['#FFB24F', '#8CCBFF', '#7ECC78', '#FFF284', '#FF7581', '#CFB8E8', '#EBC0FF', '#F9E4AD', '#723147', '#7E827A'],
seriesThemes: [{
fill: '#FFB24F'
}, {
fill: '#8CCBFF'
}, {
fill: '#7ECC78'
}, {
fill: '#FFF284'
}, {
fill: '#FF7581'
}, {
fill: '#CFB8E8'
}, {
fill: '#EBC0FF'
}, {
fill: '#F9E4AD'
}, {
fill: '#723147'
}],
markerThemes: [{
fill: '#FFB24F',
type: 'circle'
}, {
fill: '#8CCBFF',
type: 'circle'
}, {
fill: '#7ECC78',
type: 'circle'
}, {
fill: '#FFF284',
type: 'circle'
}, {
fill: '#FF7581',
type: 'circle'
}, {
fill: '#CFB8E8',
type: 'circle'
}, {
fill: '#EBC0FF',
type: 'circle'
}, {
fill: '#F9E4AD',
type: 'circle'
}, {
fill: '#723147',
type: 'circle'
}]


}, config)]);
}
});

Daniil
Apr 29, 2014, 6:38 PM
Hi @jchau,

It looks like a Chart theme doesn't deal with a Legend.

To set up a font you can use this setting:
http://docs-origin.sencha.com/extjs/4.2.1/#!/api/Ext.chart.Legend-cfg-labelFont

jchau
Apr 29, 2014, 6:41 PM
ok thanks. To confirm, there's no global way to set legend font?

Daniil
Apr 29, 2014, 7:59 PM
I'd say it should work:

Ext.chart.Legend.property.labelFont = "...";

Does it?