Display a different text in Legend

Question

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'
        }
    ]
});
    }
});

Lorelle

Answer 1

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

Rey

thanks for the reply and this hint. I think we don't made it clear enough, because we have stacked columns with more then one data-field. Please see the edited Question (I don't know how to save it in the fiddle, so I copied it) - now both labels in the legend has the same name. – Lorelle

@Lorelle I added an update to the original post. Basically, you need to provide an array of titles corresponding to each field. (more info in the answer) – Rey

Thanks you very much, that worked! But that lead us to the next question : How to use html tags inside a chart legend – Lorelle

@Lorelle That i am not positive about, it may be good to post this as a separate question? – Rey

Well, I've done that already... There is a link to that question in my last comment ;) – Lorelle

Answer 2

I added a function on renderer where I converted based on the object I wanted displayed. My values were dynamic based on form controls of selecting so a little different situation, but it worked.

    renderTo: Ext.getBody(),
    width: 500,
    height: 300,
    animate: true,
    titles: {
            oldTitle1: `Alot Blah ${rec.get('data1'}`, //Need data from my API 
            oldTitle2: `Buffer Blah blah ${rec.get('data2')}`,
            oldTitle3: `Max Yo! ${rec.get('data3')}`,
        },
    store: store,
    renderer: 'updateTitles',
    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'
        }
    ],
    updateTitles:  function (graph, scope, recs) {
        var titles = this.titles;

        graph.getSeries().forEach(
            function (series) {
                reference = series.getReference();
                field = series.getYField();
                if (titles.hasOwnProperty(reference)) {
                    series.setTitle(titles[reference])
                }
            }
        );

        return true;
});

Remaremain