ExtJS displaying field name inside chart

Question

Consider the following example of a stacked bar chart. I can display the count of each of the fields (comedy, action, drama, thriller) in the bars by adding the label config in the series, but how would I also display the field name?. The renderer config property for label doesn't seem to be of much use as the function only receives the count as argument.

label:{
  display:'insideStart'  ,
  field:[null, null, 'drama', 'thriller'],
  renderer:function(item){
    //For this case, item will be an int value. Thus, not sure how useful it is 
    //as we cannot get the field name from it.
  }          
}

rixo rixo · Accepted Answer · 2013-07-31T22:27:00

Actually, the renderer function is passed a lot more arguments than just the value. These arguments are the same as the onPlaceLabel method, with the value added to the beginning, and they are better documented there.

We've got the index of the field in the series and, as a matter of fact, we have the series also available in the item argument. With that, we can achieve what you want:

label: {
    display:'insideStart'
    ,field:[null, null, 'drama', 'thriller']
    ,renderer: function(value, label, storeItem, item, i, display, animate, index) {
        var series = item.series,
            titles = series.title;
        return titles && titles[index] || series.yField[index];
    }
}

I'm trying to get the title first because, in real life, I wouldn't display a raw field name to the user. For the record, here's how the whole serie would be configured in order to do that. It doesn't appear in the doc, except for a user comment...

series: [{
    type: 'bar',
    axis: 'bottom',
    gutter: 80,
    xField: 'year',
    yField: ['comedy', 'action', 'drama', 'thriller'],
    title: ['Comédie', 'Action', 'Drame', 'Thriller'],
    stacked: true,
    label: {
        display:'insideStart'
        ,field:[null, null, 'drama', 'thriller']
        ,renderer: function(value, label, storeItem, item, i, display, animate, index) {
            var series = item.series,
                titles = series.title;
            return titles && titles[index] || item.yField;
        }
    }
}]

ExtJS displaying field name inside chart

1 Answers