gistfile1.sass

//Style objects and properties taken from Sprite properties: http://docs.sencha.com/ext-js/4-0/#/api/Ext.draw.Sprite

chart {
  axis {
    stroke: #444;
    stroke-width: 1;
    
    label {
      fill: #444;
      font: 12px Arial, Helvetica, sans-serif;
      spacing: 2;
      padding: 5;
    }

    &[position=top], &[position=bottom] {
      title {
        font: bold 18px Arial;
        fill: #444;

      }
    }

    &[position=left], &[position=right] {
      title {
        font: bold 18px Arial;
        fill: #444;
        rotate: 0 0 270;
      }
    }
  }

  series {
    stroke-width: 0;

    label {
      font: 12px Arial;
      fill: #333;
    }

    &:nth-child(1) {
      fill: #115fa6;
    }
    
    &:nth-child(2) {
      fill: #115fa6;
    }
    
    &:nth-child(3) {
      fill: #115fa6;
    }
    
    &:nth-child(4) {
      fill: #115fa6;
    }
    
    &:nth-child(5) {
      fill: #115fa6;
    }
    
    &:nth-child(6) {
      fill: #115fa6;
    }
    
    &:nth-child(7) {
      fill: #115fa6;
    }
    
    &:nth-child(8) {
      fill: #115fa6;
    }
    
    &:nth-child(9) {
      fill: #115fa6;
    }
  }

  marker {
    stroke: #555;
    fill: #000;
    radius: 3;
    size: 3;

    &:nth-child(1) {
      fill: #115fa6;
      type: circle;
    }
    
    &:nth-child(2) {
      fill: #94ae0a;
      type: cross;
    }
    
    &:nth-child(3) {
      fill: #a61120;
      type: plus;
    }
  }
}

/*


 * implement the getItemId method.
 * implement initCls() that will return an array of classNames. So when passing the conf for an axis/series we should be abe to provide a cls: 'class1 class2' property. InitCls() returns a spilt for that.
 * implement the isXType method.
 * implement getRefItems on containers (chart class)/
 * implement ownerCt to return a parent from a container.

*/


Ext.chart.theme.Base.JSON = [
    {
        selector: 'chart axis',
        style: {
            stroke: '#444',
            'stroke-width': 1
        }
    },
    {
        selector: 'chart axis label',
        style: {
            fill: '#444',
            font: '12px Arial, Helvetica, sans-serif',
            spacing: 2,
            padding: 5
        }
    },
    {
        selector: 'chart axis[position=top] title, chart axis[position=bottom] title',
        style: {
            font: 'bold 18px Arial',
            fill: '#444'
        }
    },
    {
        selector: 'chart axis[position=left] title, chart axis[position=right] title',
        style: {
            font: 'bold 18px Arial',
            fill: '#444',
            rotate: {
                x: 0,
                y: 0,
                degrees: 270
            }
        }
    },
    {
        selector: 'chart series',
        style: {
            'stroke-width': 0
        } 
    },
    {
        selector: 'chart series label',
        style: {
            font: '12px Arial',
            fill: '#333'
        }
    },
    {
        selector: 'chart series:nth-child(1)',
        style: {
            fill: '#115fa6'
        }
    },
    {
        selector: 'chart series:nth-child(2)',
        style: {
            fill: '#94ae0a'
        }
    },
    {
        selector: 'chart series:nth-child(3)',
        style: {
            fill: "#a61120"
        }
    },
    {
        selector: 'chart series:nth-child(4)',
        style: {
            fill: '#ff8809'
        }
    },
    {
        selector: 'chart series:nth-child(5)',
        style: {
            fill: '#ffd13e'
        }
    },
    {
        selector: 'chart series:nth-child(6)',
        style: {
            fill: '#a61187'
        }
    },
    {
        selector: 'chart series:nth-child(7)',
        style: {
            fill: '#24ad9a'
        }
    },
    {
        selector: 'chart series:nth-child(8)',
        style: {
            fill: '#7c7474'
        }
    },
    {
        selector: 'chart series:nth-child(9)',
        style: {
            fill: '#a66111'
        }
    },
    {
        selector: 'chart marker',
        style: {
            stroke: '#555',
            fill: '#000',
            radius: 3,
            size: 3
        }
    },
    {
        selector: 'chart marker:nth-child(1)',
        style: {
            fill: '#115fa6',
            type: 'circle'
        }
    },
    {
        selector: 'chart marker:nth-child(2)',
        style: {
            fill: '#94ae0a',
            type: 'cross'
        }
    },
    {
        selector: 'chart series:nth-child(3)',
        style: {
            fill: '#a61120',
            type: 'plus'
        }
    }
];