Extjs Line Chart Multiline Label
I want to make a label in a line chart on the X axis that shows the summary for the selected category. I want to format this, so under the category name I have values. It works if I do:
return Ext.Date.format(v, 'M Y') + '\r' +
(val.data.Budgeted==null?'':('$ '+Ext.util.Format.number(val.data.Budgeted, '0,000') + '\r')) +
(val.data.Actual==null?'':('$ '+Ext.util.Format.number(val.data.Actual, '0,000') + '\r'));
yet the label falls as I found with every \ r char. So if I don't have \ r, it will look as it should, but if there are N '\ r'-s, then the shortcut itself will be omitted, since there are N lines of text above it.
It will also be convenient to find a way to format the text (align)
EDIT:
I found a way to do this by changing the drawVerticalLabels function in the axis config. However, this is a bad path in my opinion.
source to share
I've had to do something pretty similar I guess. There's a screenshot on SO here .
I ended up doing it as HTML template. I was not as familiar with the ExtJS framework as I am now, so if I had to redo it I would probably use xtemplate, but it worked for me:
series: [{
type: 'line',
title: 'This Year',
axis: 'left',
smooth: false,
xField: 'date_value',
yField: 'the_count',
// custom tips
tips: {
trackMouse: true,
width: 127,
height: 70,
hideDelay: 0,
dismissDelay: 0,
renderer: function(record) {
this.setTitle('<table width=115><tr><th><b>' +
record.get('date_value') +
':</b></th><td align=right>' +
record.get('the_count') +
'</td></tr><tr><th><b>Quota:</b></th><td align=right>' +
record.get('the_quota') +
'</td></tr><tr><th><b>Diff:</b></th><td align=right>' +
(record.get('the_quota') > record.get('the_count') ?
'-' + (record.get('the_quota') - record.get('the_count')) :
'+' + (record.get('the_count') - record.get('the_quota'))
) + '</td></tr></table>'
);
}
}
}]
source to share