Border on selected series in Stacked Bar charts +

Question

I am using High charts for rendering Stacked Bar charts.

How to get the border on a Stacked Bar Chart when the user clicks on a particular series?? I tried marker option but that is selecting only one series, but I want the complete series to be selected.

Currently I am getting like this:-

But, I want like this:-

Answer 1

You can use renderer to add such rect in the background: http://jsfiddle.net/3Utat/25/

    mouseOver: function () {
        var chart = this.series.chart,
            r = chart.renderer,
            shape = this.shapeArgs, // shape args for the points rect element
            xAxis = this.series.xAxis,
            yAxis = this.series.yAxis,
            y = yAxis.toPixels(this.total), // top left y-position of the rect
            x = this.plotX + chart.plotLeft - shape.width / 2, // point position + left offset + half width
            height = yAxis.toPixels(yAxis.min) - y; // bottom - top

        if (chart.hoverStack) {
            chart.hoverStack.destroy();
        }

        chart.hoverStack = r.rect(x, y, shape.width, height).attr({
                'stroke-width': 6, //border width
                'stroke': 'black', //border color
                'fill': 'transparent' //transparent fill color
        }).add();

    },
    mouseOut: function () {
        if (this.series.chart.hoverStack) {
            this.series.chart.hoverStack.destroy();
            this.series.chart.hoverStack = false;
        }
    }

Example is using mouseOver and mouseOut events, but in your case, you can use click event instead.

Answer 2

As suggested by Pawel, The correct Fiddle for Border on selected Stacked Bar Chart is :-

http://jsfiddle.net/3Utat/26/

click: function () {
                        var chart = this.series.chart,
                            r = chart.renderer,
                            shape = this.shapeArgs,
                            xAxis = this.series.xAxis,
                            yAxis = this.series.yAxis,
                            y = yAxis.toPixels(this.total),
                            x = this.plotX - shape.width / 2,
                            height = Math.abs(yAxis.toPixels(yAxis.min) - y);

                        if (chart.hoverStack) {
                            chart.hoverStack.destroy();
                        }

                        chart.hoverStack = r.rect(x, chart.plotWidth+chart.plotLeft-y, shape.width, height).attr({
                            'stroke-width': 6,
                                'stroke': 'black',
                            fill: 'transparent',
                            transform: 'translate(' + (chart.plotWidth+chart.plotLeft) + ' ' +  (chart.plotHeight+chart.plotTop) + ' ) rotate(90) scale(-1,1)'
                        }).add();

                    }