gistfile1.js

//JSON used for the theme constructor (all sections are optional):
//all style attributes are the same as the ones used for 
//Ext.draw.Sprite: http://docs.sencha.com/ext-js/4-0/#/api/Ext.draw.Sprite

    var config = {
        
        //general configuration on axes
        axis: {
            fill: '#000',
            'stroke-width': 1
        },
        
        //override axis configuration for top axis
        axisLabelTop: {
            fill: '#000',
            font: '11px Arial'
        },
        
        //override axis configuration for left axis
        axisLabelLeft: {
            fill: '#000',
            font: '11px Arial'
        },
        
        //override axis configuration for right axis
        axisLabelRight: {
            fill: '#000',
            font: '11px Arial'
        },
        
        //override axis configuration for bottom axis
        axisLabelBottom: {
            fill: '#000',
            font: '11px Arial'
        },
        
        //override axis configuration for the axis *title* on the top of the chart.
        axisTitleTop: {
            fill: '#000',
            font: '11px Arial'
        },
        
        //override axis configuration for the axis *title* on the left of the chart.
        axisTitleLeft: {
            fill: '#000',
            font: '11px Arial'
        },
        
        //override axis configuration for the axis *title* on the right of the chart.
        axisTitleRight: {
            fill: '#000',
            font: '11px Arial'
        },
        
        //override axis configuration for the axis *title* on the bottom of the chart.
        axisTitleBottom: {
            fill: '#000',
            font: '11px Arial'
        },
        
        //general styling properties for a series.
        series: {
            'stroke-width': 1
        },
        
        //general styling for the labels/text generated by a series.
        seriesLabel: {
            font: '12px Arial',
            fill: '#333'
        },
        
        //general styling for the markers of the series (if any).
        marker: {
            stroke: '#555',
            fill: '#000',
            radius: 3,
            size: 3
        },
        
        //override the general series styles for each series.
        //this means that applying seriesThemes[0] to the generic series object 
        //will generate the config for the first series, and so on for other series.
        seriesThemes: [{
            fill: '#C6DBEF'
        }, {
            fill: '#9ECAE1'
        }, {
            fill: '#6BAED6'
        }, {
            fill: '#4292C6'
        }, {
            fill: '#2171B5'
        }, {
            fill: '#084594'
        }],
        
        //override the general marker styles for each series.
        //this means that applying markerThemes[0] to the generic markers object 
        //will generate the config for the first series, and so on for other series.
        markerThemes: [{
            fill: '#084594',
            type: 'circle' 
        }, {
            fill: '#2171B5',
            type: 'cross'
        }, {
            fill: '#4292C6',
            type: 'plus'
        }]
    };

//However most of the time the user will create something simpler by using one of these two properties:

    var config = {

         //will generate a configuration assigning each color to a different series.
         colors: ['#ccc', '#ddd', '#fff']
    };

//or...

    var config = {

         //will generate an array of colors based on the number of series included based
         //on the specified color.
         baseColor: '#ccc'
    };