Edit:

Generally, it is a dupe of:
http://www.sencha.com/forum/showthread.php?243382

REQUIRED INFORMATION


Ext version tested:
  • Ext 4.2.0 beta
Browser versions tested against:
  • Chrome
  • IE9
DOCTYPE tested against:
  • <!DOCTYPE html>
Description:
  • The fill option of Area series style is ignored.
  • Applying the fill option in the renderer works.
Steps to reproduce the problem:
  • Just run the sample
The result that was expected:
  • The red area
The result that occurs instead:
  • It is green as by default.
Test Case:

Code:
<!DOCTYPE html>
<html>
<head>
    <title>Chart AreaSeries style fill doesn't work</title>

    <link rel="stylesheet" href="../resources/css/ext-all.css" />
    
    <script src="../ext-all-debug.js"></script>

    <script>
        Ext.onReady(function () {
            Ext.create("Ext.chart.Chart", {
                renderTo: Ext.getBody(),
                width: 300,
                height: 300,
                store: {
                    fields: [{
                        name: "x",    
                    }, {
                        name: "y"    
                    }],
                    data: [{
                        x: 0,
                        y: 20
                    }, {
                        x: 1,
                        y: 30
                    }]
                },
                axes: [{
                    type: "numeric",
                    fields: [ "x" ],
                    position: "bottom",
                    title: "X"
                }, {
                    type: "numeric",
                    fields: [ "y" ],
                    position: "left",
                    title: "Y"
                }],
                series: [{
                    type: "area",
                    xField: "x",
                    yField: "y",
                    style: {
                        fill: "red",
                        opacity: 0.5
                    }

                    // Workaround
                    //, renderer: function (sprite, record, attributes) {
                    //    attributes.fill = "red";

                    //    return attributes;
                    //}
                }]
            });
        });
    </script>
</head>
<body>

</body>
</html>