How to use HTML tags in a chart legend when using title to apply conditional legend text?
If we apply something like this title:['Your<b>New</b><br />Label'] , the tags are simply written as plain text.
Ext.application({ name: 'Fiddle', launch: function () { var store = Ext.create('Ext.data.JsonStore', { fields: ['name', 'data', 'data2'], data: [{ 'name': 'metric one', 'data': 10, 'data2': 2 }, { 'name': 'metric two', 'data': 27, 'data2': 5 }] }); Ext.create('Ext.chart.Chart', { renderTo: Ext.getBody(), width: 500, height: 300, animate: true, store: store, legend: { position: 'right' }, axes: [{ type: 'Numeric', position: 'left', fields: ['data', 'data2'], label: { renderer: Ext.util.Format.numberRenderer('0,0') }, title: 'Sample Values', grid: true, minimum: 0 }, { type: 'Category', position: 'bottom', fields: ['name'], title: 'Sample Metrics' }], series: [{ type: 'column', axis: 'left', highlight: true, stacked: true, tips: { trackMouse: true, width: 140, height: 28, renderer: function (storeItem, item) { this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $'); } }, label: { display: 'insideEnd', 'text-anchor': 'middle', field: 'data', renderer: Ext.util.Format.numberRenderer('0'), orientation: 'vertical', color: '#333' }, xField: 'name', yField: ['data', 'data2'], title: ['Your<b>New</b><br />Label'] }] }); } });