[4.1.1 GA] Series label color is not applied

**Daniil** · 13 Sep 2012 8:24 AM

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>

**mitchellsimoens** · 13 Sep 2012 8:44 AM

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

**Daniil** · 13 Sep 2012 11:53 AM

Thank you, Mitchell.

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

**msinn** · 21 Nov 2012 6:45 AM

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?

**Daniil** · 22 Nov 2012 5:29 AM

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>

**msinn** · 27 Nov 2012 8:48 AM

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

**Daniil** · 27 Nov 2012 10:18 PM

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.

**ukjbrown** · 3 Apr 2013 5:31 AM

Still exists in 4.2

**Daniil** · 25 Apr 2013 10:03 PM

Marked as fixed in 4.2.1.

[4.1.1 GA] Series label color is not applied

Thread Tools

Search Thread

Display

[4.1.1 GA] Series label color is not applied

[4.1.1 GA] Series label color is not applied