Display a different text in Legend

extjs, extjs-chart, extjs4

Solution

You can use `title` to change the `label` in the legend. Check out this fiddle i created from your example code for use.

series: [
        {
            type: 'column',
            axis: 'left',
            highlight: 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',
            title:'YourNewLabel'
        }

Update: If you have more than one field than supply an `array` of the corresponding titles. For instance:

`title:['My First Field','My Second Field']`

Here is a fiddle demonstrating multiple titles

Problem

This is about version 4.2.2 We have a chart like this ``` var store = Ext.create('Ext.data.JsonStore', { fields: ['name', 'data'], data: [ { 'name': 'metric one', 'data':10 }, { 'name': 'metric two', 'data':27 } ] }); 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'], 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, 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' } ] }); ``` But Legend only displays the field name which is not quite helpful. We need to apply a custom value here which should be static typed. But we've found nothing to do so. There is a `showInLegend` property but we found no `legendText` or `displayText` prop which may allow us to change the name from, in this case `data` to `A much better Name`. Edit Example with more date to display within the legend ``` 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:'YourNewLabel' } ] }); } }); ```

Original source