title: Display a different text in Legend
body: <p>This is about version 4.2.2
  We have a chart like this</p>
  
  <pre><code>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'
          }
      ]
  });
  </code></pre>
  
  <p>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 <code>showInLegend</code> property but we found no <code>legendText</code> or <code>displayText</code> prop which may allow us to change the name from, in this case <code>data</code> to <code>A much better Name</code>.</p>
  
  <p><strong>Edit</strong>
  Example with more date to display within the legend</p>
  
  <pre><code>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'
          }
      ]
  });
      }
  });
  </code></pre>