javascripthtmlcssextjssencha-touch

How to modified the font colour and font size in sencha chart for axes text


please help on this, how to change the font colour and font size in sencha chart for axes text

here my sample chart

http://jsfiddle.net/onlinesolution/djaydxnd/58/

 axes: [
   {
            type: 'Numeric',
            position: 'bottom',
            fields: ['data1'],
            minimum: 0,
            maximum:20,
            fontSize:20
        }, {
            type: 'Category',
            position: 'top',
            fields: ['month'],
        }
],

Solution

  • You need to define a custom theme for this chart:

    Ext.define('Ext.chart.theme.StackOverflow', {
        extend: 'Ext.chart.theme.Green',
    
        constructor: function(config) {
            this.callParent([Ext.apply({
                axisLabelBottom: {
                    font: '22px Arial'
                }
            }, config)]);
        }
    });
    

    Later on you can use this theme in your chart configuration:

    Ext.create('Ext.chart.Chart', {
        theme: 'StackOverflow'
        //[...] 
    }
    

    Here is a full example:
    http://jsfiddle.net/L4x72q3j/

    Here are some older but still valid details on this: http://docs.sencha.com/extjs/4.1.3/#!/guide/drawing_and_charting-section-theming
    and here the same based on newer ExtJs versions: http://docs.sencha.com/extjs/6.5.0/classic/Ext.chart.theme.Base.html#cfg-axis