Draw Line in Bar with negative stack in HighCharts

Question

In my code i want to Draw a line in every bar of the stacked bar chart.If there is any option in Highcharts to customize the chart like this

I need to draw that Selected portion line and circle in every bar.

My Code

    var categories = ['Atlanta', 'Columbia', 'Ohio', 'Great So'];
$(document).ready(function () {
    $('#container').highcharts({
        title: { text: null },
        subtitle: { text: null },
        credits: {
            enabled: false
        },

        chart: {
            type: 'bar'
        },
        xAxis: [{
            categories: categories,
            reversed: false, //to change x axis starting from top or bottom
            opposite:true,
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            tickLength: 0,

        }],
        yAxis: {
            min: -2250,
            max:2250,
            title: {
                text: null
            },
           gridLineWidth: 0,
           minorGridLineWidth: 0,
           lineColor: 'transparent',
           linewidth: 0,
           plotLines: [{
            color: '#ddd',
            width: 1,
            value: 0
        }],
            labels: {
                //step: 10,
                formatter: function () {
                    var value;

                    if(this.value==0)                                                               value='$-';
                    else if(this.value<0)
                    value='$('+Math.abs(this.value)+')';
                    else
                    value='$'+Math.abs(this.value);

                    return  value;
                }
            }
        },

        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'Male',
            data: [1000,1300,200,300]
        }, {
            name: 'Female',
            data: [1000,-300,-200,300]
        }]
    });
   });

Fiddle :Fiddle

Answer 1

Much like Sebastian Bochan's excellent answer, I approached the solution to your question by adding two "dummy series" (that have no meaningful data value) to your chart to emulate the lines and markers.

series: [{
    name: 'Male',
    data: [1000,1300,200,300],
    grouping: false,
    zIndex: 10
}, {
    name: 'Female',
    data: [1000,-300,-200,300],
    grouping: false,
    zIndex: 10
}, {
    // "dummy series" to draw the lines
    name: 'thin lines',
    data: [2495,2495,2495,2495],
    groupPadding: 0.6,
    color: 'gray',
    stacking: false,
    grouping: true,
    borderWidth: 0,
    showInLegend: false,
    enableMouseTracking: false,
    zIndex: 0
}, {
    // "dummy series" to draw the markers
    name: 'markers',
    data: [2495,2495,2495,2495],
    type: 'line',
    lineWidth: 0,
    marker: { fillColor: 'gray' },
    showInLegend: false,
    enableMouseTracking: false
}]

For the series that draws the lines, I used the (default) column format. I set the groupPadding to 0.6 to thin the column to a line, set stacking to false so it wouldn't be included with the Male and Female series, and set showInLegend and enableMouseTracking to false so the user could not interact with them.

For the markers, I chose the line format for the second "dummy" series. I set the data to the maximum viewable value (going all the way to 2500 in your example pushed the markers off the edge of the chart). I repeated the showInLegend and enableMouseTracking attributes as well.

Finally, to make the line be even with the Male and Female columns, I used the grouping attributes. I set both of these to false to make sure they wouldn't be plotted together with the "dummy" column.

Here's an updated version of your fiddle with these changes: http://jsfiddle.net/brightmatrix/1hgvxp0u/3/

Answer 2

You can use the extra scatter series with declared null points and lineWidth parameter.

series: [{
         type:'scatter',
       color: 'red',
       lineWidth: 2,
       data: [[0,0],[0,800],null,[1,0],[1,800],null,[2,0],[2,800],null,[3,0],[3,800],null,[4,0],[4,800]]
    }, {
        name: 'Year 1800',
        data: [107, 31, 635, 203, 100]
    }, {
        name: 'Year 1900',
        data: [-133, -156, -247, -408, 20]
    }]

Missing rectangle can be added by Renderer.rect function.

Example:

• http://jsfiddle.net/9u3hgq42/