View Full Version : How to change the legend text for a multi-column chart

16 May 2012, 9:07 AM
I have a multi-column chart with data values "d1-dn" and I have names to go with those, but those names are user entered text that can include ' and other interesting characters, so it doesn't seem wise to use those as the field names.

What I can't seem to find is a way to replace the yField values when the legend is being drawn. It appears this isn't possible without modifying LegendItem.js

function getSeriesProp(name) {
var val = series[name];
return (Ext.isArray(val) ? val[idx] : val);

label = me.add('label', surface.add({
type: 'text',
x: 20,
y: 0,
zIndex: (z || 0) + 2,
fill: legend.labelColor,
font: legend.labelFont,
text: getSeriesProp('title') || getSeriesProp('yField'),
style: {
'cursor': 'pointer'

Seems like either the series needs a getLegendTitleText or the legend needs a method getItemText method that would allow translation from data element name, to user readable name.

This is on extjs4.1

16 May 2012, 10:35 AM
If you're saying that you have a multi-series chart, you can do this to supply custom legend text:

series: [{
type: 'column',
axis: 'left',
highlight: true,
xField: 'category',
yField: ['salesWeek', 'salesMonth', 'salesQuarter', 'salesYear'],
title: ['Weekly', 'Monthly', 'Quarterly', 'Yearly']

Obviously, this isn't too flexible as the legend text is hard coded, but it works.