Label placement on stacked column chart

[ben.gillis]

The label for a stacked column chart is not placing the label over each column. Rather, it is placing it over the lowest section of each column.

Why doesn't the label position over the entire column?

                    label: {
                        display: 'outside',
                        'text-anchor': 'middle',
                        field: ['Category'],
                        renderer: function (v) {
                            var total = getCategoryTotal(v)
                            return (total);
                        },
                        orientation: 'horizontal'
                    }


...

        function getCategoryTotal(category) {
            var _total = 0;
            $.each(_myData, function (i, c) {
                if (c.Name == category) {
                    _total = c.SubtotalA+ c.SubtotalB;
                    return(false);
                }
            });
            return (_total);
        }

(Each column is two parts, SubTotalA and SubTotalB. SubTotalA is under SubTotalB in each column. The label ends up over SubTotalA, not over SubTotalB at the top of the column).

[ben.gillis]

This and

http://www.sencha.com/forum/showthread.php?132179-4.0.0-Stacked-Column-chart-label-issue&highlight=label+stacked+bar+chart

and

http://www.sencha.com/forum/showthread.php?211456-Stacked-Bar-Labels&highlight=label+stacked+bar+chart

and I could put more of them up.

unanswered for months.


The label renderer function is useless. It passes ONLY the *value* of a field without any other context for control e.g.


1. In the stacked bar, the label should be a TOTAL of all the bars - over the bar- and no other bar should have a label.

2. Prevent label overlap when a bar in the stack is too short to have a label (rather, a tooltip can display that value).

or something as simple as

3. Is there only 1 bar or more than 1 stacked in this particular column? (Because, I can put a label on a very short bar as long as it's by itself in a column - so that it doesn't possibly overlap the label of another bar in the column).

and more


Labels are important to graphs, yet the more I look the more I see unanswered label questions everywhere and effectively useless examples with poor documentation.

This is far too basic to have no answers available. Yet, this post indicates you need PREMIUM SUPPORT FOR A *LABEL*?

http://www.sencha.com/forum/showthread.php?146204-stacked-barchart-gt-label-each-barsegment&highlight=label+stacked+bar+chart


The very reason I have not bought premium support: Sencha's documentation is poor and the very basics aren't answered. One can't even follow a simple example (e.g. a data store reader has a 'type' in the examples, where are the options and explanations for that under data store, or reader? Many of the examples are like that.). It comes across as deliberately obscuring simple information to upsell into premium. So, what'll I get in premium support, more of the same?

Why not offer a per-incident fixed price break/fix professional service? (All I see is hourly. And, honestly, it really motivates me to try other graphing packages first vs. something this basic requiring premium support).

I'm better off using the time & effort in one of these other graphing packages vs. scrounging around for a stupid label on a stacked bar chart - that apparently many more posters got no answer either - or told its on the premium support plan.

http://www.trirand.net/demochartaspnetmvc.aspx

http://www.highcharts.com/demo/

http://wijmo.com/demos/

[kevin.chen]

Would you please upload entire test case?

Thanks

[kevin.chen]

The label of Ext column is designed for each staked column, every stacked column has its own lable, the proposal you asked to display the label for the the entire column of staked column is good idea. I can add a feature request for you. if I have time, I can create a workaround for you.


since I did not receive your response, I suppose the yField: ['category', 'category2']

so, your label should be defined as following in order to show the whole label data

label: {
    display: 'outside',
    'text-anchor': 'middle',
    field: ['Category','Catetory2'],
    orientation: 'horizontal'
}

[kevin.chen]

since you have two fields, the renderer doesn't make sense, right?

[kevin.chen]

if you use stacked column chart and want to have a renderer for different stacked column, I have an override for you

Ext.define('mypatch', {
    override: 'Ext.chart.series.Column',
    onPlaceLabel: function(label, storeItem, item, i, display, animate, j, index) {
        // Determine the label's final position. Starts with the configured preferred value but
        // may get flipped from inside to outside or vice-versa depending on space.
        var me = this,
            opt = me.bounds,
            groupBarWidth = opt.groupBarWidth,
            column = me.column,
            chart = me.chart,
            chartBBox = chart.chartBBox,
            resizing = chart.resizing,
            xValue = item.value[0],
            yValue = item.value[1],
            attr = item.attr,
            config = me.label,
            rotate = config.orientation == 'vertical',
            field = [].concat(config.field),
            renderer = [].concat(config.renderer),
            format = config.renderer[index],
            text = format(storeItem.get(field[index])),
            size = me.getLabelSize(text),
            width = size.width,
            height = size.height,
            zero = opt.zero,
            outside = 'outside',
            insideStart = 'insideStart',
            insideEnd = 'insideEnd',
            offsetX = 10,
            offsetY = 6,
            signed = opt.signed,
            x, y, finalAttr;


        label.setAttributes({
            text: text
        });


        label.isOutside = false;
        if (column) {
            if (display == outside) {
                if (height + offsetY + attr.height > (yValue >= 0 ? zero - chartBBox.y : chartBBox.y + chartBBox.height - zero)) {
                    display = insideEnd;
                }
            } else {
                if (height + offsetY > attr.height) {
                    display = outside;
                    label.isOutside = true;
                }
            }
            x = attr.x + groupBarWidth / 2;
            y = display == insideStart ?
                (zero + ((height / 2 + 3) * (yValue >= 0 ? -1 : 1))) :
                (yValue >= 0 ? (attr.y + ((height / 2 + 3) * (display == outside ? -1 : 1))) :
                    (attr.y + attr.height + ((height / 2 + 3) * (display === outside ? 1 : -1))));
        }
        else {
            if (display == outside) {
                if (width + offsetX + attr.width > (yValue >= 0 ? chartBBox.x + chartBBox.width - zero : zero - chartBBox.x)) {
                    display = insideEnd;
                }
            }
            else {
                if (width + offsetX > attr.width) {
                    display = outside;
                    label.isOutside = true;
                }
            }
            x = display == insideStart ?
                (zero + ((width / 2 + 5) * (yValue >= 0 ? 1 : -1))) :
                (yValue >= 0 ? (attr.x + attr.width + ((width / 2 + 5) * (display === outside ? 1 : -1))) :
                    (attr.x + ((width / 2 + 5) * (display === outside ? -1 : 1))));
            y = attr.y + groupBarWidth / 2;
        }
        //set position
        finalAttr = {
            x: x,
            y: y
        };
        //rotate
        if (rotate) {
            finalAttr.rotate = {
                x: x,
                y: y,
                degrees: 270
            };
        }
        //check for resizing
        if (animate && resizing) {
            if (column) {
                x = attr.x + attr.width / 2;
                y = zero;
            } else {
                x = zero;
                y = attr.y + attr.height / 2;
            }
            label.setAttributes({
                x: x,
                y: y
            }, true);
            if (rotate) {
                label.setAttributes({
                    rotate: {
                        x: x,
                        y: y,
                        degrees: 270
                    }
                }, true);
            }
        }
        //handle animation
        if (animate) {
            me.onAnimate(label, { to: finalAttr });
        }
        else {
            label.setAttributes(Ext.apply(finalAttr, {
                hidden: false
            }), true);
        }
    }
})

[kevin.chen]

in this case, you label should be defined as following

                label: {
                  display: 'insideEnd',
                  'text-anchor': 'middle',
                    field: ['data1','data2'],
                    renderer: [function(data1){return 2}, function(data2){return 3}],
                    orientation: 'vertical',
                    color: '#333'
                },

[kevin.chen]

and all of you column label renderer have to be an array after apply this override even not stacked column

[ben.gillis]

Yes, I am waiting for a Standard Support confirmation from Sencha. Then, will provide a URL to an example of what we're trying to fix: getting a total label over a stacked bar.

[kevin.chen]

the override I provided is for Extjs 4.1.2