Apr 29, 2014, 1:40 PM
[CLOSED] Change font style of chart Legend
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)]);
}
});
Last edited by Daniil; May 06, 2014 at 7:01 AM.
Reason: [CLOSED]