Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-7235 in a recent build.
  1. #1
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    975
    Vote Rating
    110
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      1  

    Default [4.1.1 GA] Series label color is not applied

    [4.1.1 GA] Series label color is not applied


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.1.1 GA
    Browser versions tested against:
    • Any
    Description:
    • A series label color is not applied. It is applied with "contrast: true" option only.
    Steps to reproduce the problem:
    • Just run the sample.
    The result that was expected:
    • Green labels
    The result that occurs instead:
    • Black labels
    Test Case:

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Axes labels Bug</title>
    
        <link type="text/css" rel="stylesheet" href="../resources/css/ext-all.css" />
        
        <script type="text/javascript" src="../ext-all.js"></script>
    
        <script type="text/javascript">
            Ext.onReady(function () {
                Ext.create("Ext.chart.Chart", {
                    renderTo: Ext.getBody(),
                    height: 400,
                    width: 400,
                    axes: [{
                        position: "bottom",
                        title: "X",
                        fields: ["x"],
                        type: "Numeric"
                    }, {
                        position: "left",
                        title: "Y",
                        fields: ["y"],
                        type: "Numeric"
                    }],
                    series: [{
                        type: "line",
                        title: "LineSeries",
                        xField: "x",
                        yField: "y",
                        label: {
                            field: "y",
                            display: "under",
                            color: "#00FF00"
                            //, contrast : true
                        }
                    }],
                    store: {
                        fields: [{
                            name: "x"
                        }, {
                            name: "y"
                        }],
                        autoLoad: true,
                        proxy: {
                              type: 'memory',
                            data: [{
                                x: 0,
                                y: 0
                            }, {
                                x: 50,
                                y: 50
                            }, {
                                x: 100,
                                y: 100
                            }]
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
    
    </body>
    </html>

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    975
    Vote Rating
    110
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Thank you, Mitchell.

    Again, I didn't get an email notification. Please clarify is there any known problem with notifications?

  4. #4
    Touch Premium Member msinn's Avatar
    Join Date
    Jul 2009
    Location
    in front of my pc
    Posts
    280
    Vote Rating
    5
    msinn is on a distinguished road

      0  

    Default


    Even if I try to change the label color over a Theme, the new value wont't be applied to the label.

    Code:
    Ext.chart.theme.LineLabels = Ext.extend(Ext.chart.theme.Base, {
        constructor: function() {
            Ext.chart.theme.LineLabels.superclass.constructor.call(this, {
                seriesLabel: {
                    font: '12px Arial',
                    color:'#333333'
                }
           });
        }
    });
    This is tested with Ext.chart.series.Line.

    Is there a workaround or ta css class to apply on the label?
    First I would like to thank you for your time and knowledge

    Win 7 Ext JS 4.1.3 IE(6-9), FF17

  5. #5
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    975
    Vote Rating
    110
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      1  

    Default


    Hi @msinn,

    The problem lays in a Ext.chart.Label mixin, the renderLabels method.

    There is the following condition.
    Code:
    if (config.contrast && item.sprite)
    Removing "config.contrast &&" does the trick. Though, I don't know why this condition appeared initially. So, I can't guarantee there won't be any backstage effects.

    Here is a working sample.

    Example
    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Axes labels Bug</title>
    
        <link type="text/css" rel="stylesheet" href="../resources/css/ext-all.css" />
        
        <script type="text/javascript" src="../ext-all.js"></script>
    
        <script>
            Ext.chart.series.Line.override({
                renderLabels: function() {
                    var me = this,
                        chart = me.chart,
                        gradients = chart.gradients,
                        items = me.items,
                        animate = chart.animate,
                        config = me.label,
                        display = config.display,
                        color = config.color,
                        field = [].concat(config.field),
                        group = me.labelsGroup,
                        groupLength = (group || 0) && group.length,
                        store = me.chart.getChartStore(),
                        len = store.getCount(),
                        itemLength = (items || 0) && items.length,
                        ratio = itemLength / len,
                        gradientsCount = (gradients || 0) && gradients.length,
                        Color = Ext.draw.Color,
                        hides = [],
                        gradient, i, count, groupIndex, index, j, k, colorStopTotal, colorStopIndex, colorStop, item, label,
                        storeItem, sprite, spriteColor, spriteBrightness, labelColor, colorString;
    
                    if (display == 'none') {
                        return;
                    }
            
                    if(itemLength == 0){
                        while(groupLength--) {
                            hides.push(groupLength);
                        }
                    } else {
                        for (i = 0, count = 0, groupIndex = 0; i < len; i++) {
                            index = 0;
                            for (j = 0; j < ratio; j++) {
                                item = items[count];
                                label = group.getAt(groupIndex);
                                storeItem = store.getAt(i);
                        
                                while(this.__excludes && this.__excludes[index]) {
                                    index++;
                                }
    
                                if (!item && label) {
                                    label.hide(true);
                                    groupIndex++;
                                }
    
                                if (item && field[j]) {
                                    if (!label) {
                                        label = me.onCreateLabel(storeItem, item, i, display, j, index);
                                    }
                                    me.onPlaceLabel(label, storeItem, item, i, display, animate, j, index);
                                    groupIndex++;
    
                            
                                    if (/*config.contrast && */item.sprite) { // here is a workaround
                                        sprite = item.sprite;
                                
                                        if (sprite._endStyle) {
                                            colorString = sprite._endStyle.fill;
                                        }
                                        else if (sprite._to) {
                                            colorString = sprite._to.fill;
                                        }
                                        else {
                                            colorString = sprite.attr.fill;
                                        }
                                        colorString = colorString || sprite.attr.fill;
    
                                        spriteColor = Color.fromString(colorString);
                                
                                        if (colorString && !spriteColor) {
                                            colorString = colorString.match(me.colorStringRe)[1];
                                            for (k = 0; k < gradientsCount; k++) {
                                                gradient = gradients[k];
                                                if (gradient.id == colorString) {
                                            
                                                    colorStop = 0; colorStopTotal = 0;
                                                    for (colorStopIndex in gradient.stops) {
                                                        colorStop++;
                                                        colorStopTotal += Color.fromString(gradient.stops[colorStopIndex].color).getGrayscale();
                                                    }
                                                    spriteBrightness = (colorStopTotal / colorStop) / 255;
                                                    break;
                                                }
                                            }
                                        }
                                        else {
                                            spriteBrightness = spriteColor.getGrayscale() / 255;
                                        }
                                        if (label.isOutside) {
                                            spriteBrightness = 1;
                                        }
                                        labelColor = Color.fromString(label.attr.color || label.attr.fill).getHSL();
                                        labelColor[2] = spriteBrightness > 0.5 ? 0.2 : 0.8;
                                        label.setAttributes({
                                            fill: String(Color.fromHSL.apply({}, labelColor))
                                        }, true);
                                    }
    
                                }
                                count++;
                                index++;
                            }
                        }
                        groupLength = group.length;
            
                        while(groupLength > groupIndex){
                            hides.push(groupIndex);
                            groupIndex++;
                       }
                    }
                    me.hideLabels(hides);
                }
            });
        </script>
    
        <script type="text/javascript">
            Ext.onReady(function () {
                Ext.create("Ext.chart.Chart", {
                    renderTo: Ext.getBody(),
                    height: 400,
                    width: 400,
                    axes: [{
                        position: "bottom",
                        title: "X",
                        fields: ["x"],
                        type: "Numeric"
                    }, {
                        position: "left",
                        title: "Y",
                        fields: ["y"],
                        type: "Numeric"
                    }],
                    series: [{
                        type: "line",
                        title: "LineSeries",
                        xField: "x",
                        yField: "y",
                        label: {
                            field: "y",
                            display: "under",
                            color: "#00FF00"
                            //, contrast : true
                        }
                    }],
                    store: {
                        fields: [{
                            name: "x"
                        }, {
                            name: "y"
                        }],
                        autoLoad: true,
                        proxy: {
                              type: 'memory',
                            data: [{
                                x: 0,
                                y: 0
                            }, {
                                x: 50,
                                y: 50
                            }, {
                                x: 100,
                                y: 100
                            }]
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
    
    </body>
    </html>
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  6. #6
    Touch Premium Member msinn's Avatar
    Join Date
    Jul 2009
    Location
    in front of my pc
    Posts
    280
    Vote Rating
    5
    msinn is on a distinguished road

      0  

    Default


    Thank you,

    now I can see them better... but you posted also another bug for the positioning of the labels in a line series.
    So they are allways behind the marker point or out of the series area.
    And when I resize the browser window, they disappear at all .
    Working with Labels in a line series can be very frustrating
    First I would like to thank you for your time and knowledge

    Win 7 Ext JS 4.1.3 IE(6-9), FF17

  7. #7
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    975
    Vote Rating
    110
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Agree, these issues annoys. Hopefully, they will be fixed in 4.2.

    And when I resize the browser window, they disappear at all .
    You can point this thing out in my bug report. To get a chance that ExtJS will look at it and, probably, will fix as well.
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  8. #8
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    14
    Vote Rating
    2
    ukjbrown is on a distinguished road

      0  

    Default


    Still exists in 4.2

  9. #9
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    975
    Vote Rating
    110
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Marked as fixed in 4.2.1.
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  10. #10
    Sencha User
    Join Date
    Mar 2011
    Posts
    3
    Vote Rating
    0
    kuangniaokuang is on a distinguished road

      0  

    Default color' attribute still doesn't work in 4.2.1

    color' attribute still doesn't work in 4.2.1


    'color' attribute still doesn't work in 4.2.1


    'fill' can work................................
    Last edited by kuangniaokuang; 24 Jun 2013 at 12:09 AM. Reason: add