3

I have an issue while using custom legend color in EXTJS 5 chart. I can apply custom color to the chart legend but i cannot apply that to the legend item. In EXT JS 4, i can use one override function to in series to handle it. like

getLegendColor: function(index) {
    var proSpeciality = ["#EFD07B","#0082AD"];
    return proSpeciality[index];
}

But this is not available in EXT JS 5.

Sample code.

Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
layout: 'fit',
items: {
    xtype: 'cartesian',
    store: {
        fields: ['name', 'value','value2'],
        data: [
            {name: 'metric one', value: 10,value2: 15},
            {name: 'metric two', value: 7,value2: 15},
            {name: 'metric three', value: 5,value2: 15},
            {name: 'metric four', value: 2,value2: 15},
            {name: 'metric five', value: 27,value2: 15}
        ]
    },
    axes: [{
        type: 'numeric',
        position: 'left',
        title: {
            text: 'Sample Values',
            fontSize: 15
        },
        fields: 'value'
    }, {
        type: 'category',
        position: 'bottom',
        title: {
            text: 'Sample Values',
            fontSize: 15
        },
        fields: 'name'
    }],
        legend: {
            docked: 'top',
             style: {
                stroke: '#ffffff',
                'stroke-width': 2,
                opacity: 1
            },
            tpl: [
                '<tpl for=".">               ',
                '                <div class="myLegendItem" style="float:left;margin:5px;padding:0px;cursor:pointer;">',
                '                      <div class="" style="float:left;margin:2px;width:12px;height: 12px; background:{mark};"></div><div style="float:left;">{name}</div>                                     ',
                '                </div>                    ',
                '            </tpl>'
            ],
            itemSelector: '.myLegendItem'
        },
    series: {
        type: 'bar',
        xField: ['name'],
        yField: ['value','value1'],
        stacked: false,
        renderer: function(sprite, record, attributes, index, store) {
                            var proSpeciality = ["#EFD07B","#0082AD","#00A67B","#AD1808","#520084"];
                            attributes.fill = proSpeciality[index % proSpeciality.length];
                            return attributes;
                        },
        getLegendColor: function(index) {
                    var proSpeciality = ["#EFD07B","#0082AD"];
                    return proSpeciality[index];
        }
    }

}

});

enter image description here

Please let me know if i need to change something.

Thanks in advance

Isha John
  • 593
  • 2
  • 5
  • 16

2 Answers2

2

Try to use "colors" property within series:

series: {
    type: 'bar',
    colors: ['orange', 'yellow'],
    ...
}

Example: https://fiddle.sencha.com/#fiddle/bk1

Aleksei Mialkin
  • 2,257
  • 1
  • 28
  • 26
  • This is good choice. But i have a quick question. In some situation, i need to pass the color code dynamically. So for that i will use a globel array for color codes. It will change based on user selection. So i cannot hard-code it. – Isha John Oct 10 '14 at 11:50
  • 1
    That's a good question but I don't know the answer, unfortunately. Let me know if you'll find workaround eventually. – Aleksei Mialkin Oct 10 '14 at 12:15
  • 1
    Finally i got the solution. I have added a function in tpl. whick will return color based on the index. – Isha John Oct 10 '14 at 14:32
0

Answering the question about 'global colour arrays' (which I can't answer in the comments section - not enough reputation. Aleksei Mialkin is quite right in his solution), you can use a singleton to hold these sorts of values

Ext.define("MyApp.colours", {
    singleton:  true,
    COL1: 'orange',
    COL2: 'red',
    COL3: 'blue',
    COL4: 'green'
});

Then reference as

    ...
    colors: [MyApp.colours.COL1,  MyApp.colours.COL2],
    ...
Lesley.Oakey
  • 358
  • 1
  • 7