Update legend colors in ExtJS 6 chart

Question

I have a bar chart with a legend in ExtJS 6.0.2.

I need to update the colors of the bars and of the legend when the user does an action (clicking on a pie slice in my case).

Updating the color of the bars works as intended, but the legend doesn't. Here is an example of what I do right now :

chart.getLegendStore().data.items.forEach(function(x){
    x.data.mark = 'rgb(255,255,255)';
});

The colors are correctly set, but they only update when I click on the legend item. I guess it's because ExtJS has no way to know that the underlying store has been modified. I tried going up the callstack with the debugger but I didn't find anything useful.

Is there a better way to do what I want, or/and how to make the legend update instanly ?

EDIT: If it helps, here is how I update the bars :

serie.setConfig("colors", newColors);

EDIT2 : And here is the full chart code :

Ext.define('QuoteBarChart', {
extend: 'Ext.chart.CartesianChart',

alias: 'widget.quotebarchart',
xtype: 'quotebarchart',

requires: [
    'Ext.chart.axis.Category',
    'Ext.chart.axis.Numeric',
    'Ext.chart.series.Bar',
    'Ext.chart.series.Line',
    'Ext.chart.theme.Muted',
    'Ext.chart.interactions.ItemHighlight'
],

flex: 2,
height: 600,
theme: 'Muted',
itemId: 'chartId',

store: {
    type: 'quote'
},

insetPadding: {
    top: 40,
    bottom: 40,
    left: 20,
    right: 40
},

axes: [{
    type: 'numeric',
    position: 'left',
    fields: ['won', 'lost', 'open'],
    minimum: 0,
    grid: true,
    titleMargin: 20,
    title: 'Offres'
}, {
    type: 'category',
    position: 'bottom',
    label: {
        rotate: {
            degrees: 45
        }
    },
    fields: ['month']
}
],

series: [{
    type: 'bar',
    axis: 'left',
    xField: 'month',
    itemId: 'barId',
    yField: ['open','lost','won'],
    title: ['Ouvertes', 'Perdues','Gagnées'],
    stacked: true,
    fullStack: true,

    colors: [
        'rgb(64, 145, 186)', 'rgb(151, 65, 68)','rgb(140, 166, 64)'
    ],
    highlight: {
        strokeStyle: 'red',
        fillStyle: 'black'
    },
    tooltip: {
        trackMouse: true,
        scope: this,
        renderer: function (toolTip, storeItem, item) {
            var name = "";
            switch(item.field) {
                case 'won': name = "Gagnées"; break;
                case 'lost': name = "Perdues"; break;
                case 'open': name = "Ouvertes"; break;
            }
            toolTip.setHtml("");
        }
    }
}],
legend: {
    docked: 'bottom',
    listeners: {
        itemclick: 'onLegendItemClick',
        itemmouseenter: 'onLegendItemHover'
    }
}
)};

Answer 1

Ok, instead of modify colors of the series and colors of the legend, you can modify all of them in the same time doing this

                chart.setColors(['red','blue','green']);
                chart.redraw();

So you need to set colors on chart and not on series, and modify the array on button click.