Extjs Changing color of bars in stacked bar chart

let's take this example... how to change colors of those bars?

I know I can change it via renderer but it won't change legend.

I have tried to use:

style: {fill: 'red'}

but it changes color of ever b开发者_如何学JAVAar

I have tried to put colors in array, its not working.

I have tried to put each style in array, like this:

style: [{fill: 'red'}, {fill: 'green'}, {fill: 'blue'}]

But it won't work either, since I can put titles in array like:

title: ['title1', 'title2', 'title3']

I thought it (styles) should work too but not.

So how can I change color of each "data" bar?

Bar colors are actually determined by the chart's theme:

Ext.create('Ext.chart.Chart', {
    theme: 'myTheme'
    //the remainder of your code...
});

In order to use custom colors, you will need to extend the existing 'Base' theme, as in the custom area chart example.

Chart uses Theme as mixins

So you can directly use theme property called themeAttrs.

For example if you are in constructor of column/stacked column chart, want to change the color of columns You can specify

this.themeAttrs.colors = ['#F2C72B','#a5c249','#E88712','#9D5FFA'];

Ext.onReady(function() 
{

  Ext.create('Ext.window.Window', 
  {
    title: 'Pie1 Chart',
    height: 400,
    layout: 'fit',
    width: 400,
    items: 
    [{
      xtype: 'chart',
      animate:false ,
      insetPadding:0,

      legend: 
    {
        position: 'right'
        },
      shadow: true,
      store: 
    {
        fields: 
    [{
          name: 'category', type: 'string'
        },

    {
          name: 'data', type: 'float'
        }],
        data: 
    [{
          category: 'Alive', data: 1.5
        },{
          category: 'Dead', data: 2 
        },{
          category: 'Standby', data: 1
        }]
      },
      series: [{
        type: 'pie',
        field: 'data',
     colorSet: ['#0000FF','#FFffff','#00FF00'],

        showInLegend: true, <!--It is use to display data in which color.-->
        highlight: {
          segment: {
            margin: 20
          }
        },
        label: {
          field: 'category',
          display: 'rotate',
          contrast: true,
          font: '18px Arial'
        }
      }]
    }]
  }).show();  
});

using colorSet you can change color.

I decided add full code:

Ext.require('EAM.view.chart.*');
Ext.define('EAM.view.chart.integral.IntegralChart',
{
    extend : 'Ext.chart.Chart',
    alias : 'widget.GroupsIntegralChart',
    animate : true,
    shadow : true,
    // theme : 'Browser:gradients',

    initComponent : function()
    {
        var me = this;
        me.themeAttrs.colors =
        [
            'orange',
            'red',
            'blue',
            'green',
        ];
        me.callParent(arguments);
    },
...

If you don't want to use a theme, you can use this (at least it worked for me):

this.series = [{
type: 'column',
axis: 'left',
showInLegend : true,
xField: 'f1',
style :{
    fill :  '#ff00ff',
    'stroke-width': 3,
    width: 20
},
renderer: function(sprite, storeItem, barAttr, i, store) {
    barAttr.fill = '#ff00ff';
    barAttr.width = 20;
    return barAttr;
},
title : 'title',
yField: 'f2'
}]

Note that you have to put your color in two different lines (I think ExtJS is sometimes kinda stupid framework).

I'm using Ext JS 5.0 There is no need to worry,just include colors config in series.

series : [{
        type : 'bar',
        colors:['#f23f3f','#ff8809','#ff0','#0039a6','#00ee88','#ff8aed'],
        xField : ['Q1']
        yField : ['Critical', 'Major', 'Minor', 'Warning', 'Informational',   'Indeterminent']
}]