extjs change chart axes label color

Question

I have a chart with axes labels and I want to change the color of the labels from black to red. I've looked here: http://www.sencha.com/learn/drawing-and-charting/ under "theming" and I think I can do what I want by defining a custom theme and do something like this:

axisTitleTop: {
    fill: '#000',
    font: '11px Arial'
},
axisTitleLeft: {
    fill: '#000',
    font: '11px Arial'
},
axisTitleRight: {
    fill: '#000',
    font: '11px Arial'
},
axisTitleBottom: {
    fill: '#000',
    font: '11px Arial'
},

to mess with the axes titles.

My question is: using MVC, where do I define my custom theme class and how do I include it?

EDIT: I figured out a much easier way to do this (without using themes), see below

Answer 1

Found an easier way to do this, without using themes.

To configure the title label color of an axes just add the label title configuarion to that axes:

labelTitle:{
   fill:"#B22222"
}

Answer 2

Please refer example code, it will work. All the below code needs to be written inside controller.

Note : All MyChart.xxxxx values are written in my custom css file. You can write your own css or hardcode the value.

/* 
 * Inside init function of controller
*/
this.control({
            'Panel[id = chartPanel]' : {
                afterrender  :   this.onPanelRendered
            }




/*
* This function will be invoked on initial rendering of chart panel
*/
    ,onPanelRendered : function(chartPanel) {
        this.loadPanel(chartPanel);
    }




,loadPanel : function(chartPanel) {
        this.setChartTheme();
        this.updateChartInfo();

    }




/*
     * to set chart custom theme
     */
    ,setChartTheme:function(){
        Ext.define('Ext.chart.theme.myTheme',{
            extend:'Ext.chart.theme.Base'
            ,constructor:function(config){
                this.callParent([Ext.apply({
                    axisTitleTop: {
                        font: MyChart.chartThemeAxisTitleTopFont,
                        fill: MyChart.chartThemeAxisTitleTopFill
                    },
                    axisTitleRight: {
                        font: MyChart.chartThemeAxisTitleFont,
                        fill: MyChart.chartThemeAxisTitleTopFill,
                        rotate: {
                            x:MyChart.chartThemeAxisTitleRotatex,
                            y:MyChart.chartThemeAxisTitleRotatey,
                            degrees: MyChart.chartThemeAxisTitleRotateDegree
                        }
                    },
                    axisTitleBottom: {
                        font: MyChart.chartThemeAxisTitleFont,
                        fill: MyChart.chartThemeAxisTitleTopFill
                    },
                    axisTitleLeft: {
                        font: MyChart.chartThemeAxisTitleFont,
                        fill: MyChart.chartThemeAxisTitleTopFill,
                        rotate: {
                            x:MyChart.chartThemeAxisTitleRotatex,
                            y:MyChart.chartThemeAxisTitleRotatey,
                            degrees: MyChart.chartThemeAxisTitleRotateDegree
                        }
                    }
                },config)]) ;

            }
        });
    }






,updateChartInfo : function() {
        this.updatexChart();
        Ext.getCmp(<Ur panel id>).add(MyChart.xChart);

    }





,updatexChart:function(){

        MyChart.xChart   =    Ext.create('Ext.chart.Chart',{
            ........
            ........
            ........
            ,style  :  
            ,theme  :  'myTheme'   // This is our custom theme
            ,legend : {
                position        :  
                labelFont       :  
            }
            ,store  : 
            ,axes   :[
                {
                    type     :  
                    ,position:  
           ......
           .......
           .......

Thanks