PDA

View Full Version : Customizing Legend Text in chart



bevara.siva
12 May 2014, 5:58 AM
Hi,

We are using Ext Js 4.2.2.
We have issue customizing the Legend Text. We have "_" in the field labels. So same is coming in the Legend Titles. How can I replace "_" with " " in the legends. Following is the same created on the fiddle.




Ext.application({
name : 'Fiddle',


launch : function() {

var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data_1', 'data_2', 'data_3', 'data_4', 'data5'],
data: [
{ 'name': 'metric one', 'data_1': 10, 'data_2': 12, 'data_3': 14, 'data_4': 8, 'data_5': 13 },
{ 'name': 'metric two', 'data_1': 7, 'data_2': 8, 'data_3': 16, 'data_4': 10, 'data_5': 3 },
{ 'name': 'metric three', 'data_1': 5, 'data_2': 2, 'data_3': 14, 'data_4': 12, 'data_5': 7 },
{ 'name': 'metric four', 'data_1': 2, 'data_2': 14, 'data_3': 6, 'data_4': 1, 'data_5': 23 },
{ 'name': 'metric five', 'data_1': 27, 'data_2': 38, 'data_3': 36, 'data_4': 13, 'data_5': 33 }
]
});


Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
shadow: true,
theme: 'Category1',
legend: {
position: 'top'
},
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['data_1', 'data_2', 'data_3', 'data_4', 'data_5'],
title: 'Sample Values',
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 1
}
},
minimum: 0,
adjustMinimumByMajorUnit: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics',
grid: true,
label: {
rotate: {
degrees: 315
}
}
}
],
series: [{
type: 'area',
highlight: false,
axis: 'left',
xField: 'name',
yField: ['data_1', 'data_2', 'data_3', 'data_4', 'data_5'],
style: {
opacity: 0.93
}
}]
});
}
});



Please help!!!

Regards,
SivaPrasad.B

Gary Schlosberg
16 May 2014, 1:48 PM
Have you tried with space in the field names? Seems kind of wrong, but it works with your code in this fiddle:
https://fiddle.sencha.com/#fiddle/5uf

bevara.siva
18 May 2014, 10:50 PM
Thank you for the response.

Fields in the model does not except spaces.
So I cant use the spaces in the fields.

Regards,
SivaPrasad.B