Customize Stacked column chart in highChart

Question

I am trying to customize stacked column chart like this

Here i did all the remaining things but i Don't know how to give that bar lines above every column........I need that bar lines in both positive and negative axis

My code

$(document).ready(function () {
    $('#div1').highcharts({
         chart: { type: 'column', backgroundColor: 'transparent' },
        title: { text: null },
        subtitle: { text: null },
        credits: {
            enabled: false
        },
                    xAxis: {
            categories: categories,
            labels: {
                rotation: 0,
                style: {
                    fontWeight: 'normal',
                    fontSize: '0.9vw',
                    fontFamily: 'Verdana, sans-serif',
                    color: "black"
                }
            }
        },
        yAxis: {
            title: {
                enabled: false
            },
            lineWidth: 0,
            gridLineWidth: 1,
            labels: {
                enabled: true
            },
           // gridLineColor: 'transparent',
            plotLines: [{
                color: '#ddd',
                width: 1,
                value: 0
            }],

        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series:seriesforSeniorUPT
    });
});

});

Link Fiddle

Answer 1

To elaborate on Sebastian Bochan's helpful comment, here's an updated version of your fiddle with two "dummy" series to serve as the patterned background: https://jsfiddle.net/brightmatrix/hc8rLy18/2/

A few items to note:

• There are two "dummy" series: one for the positive numbers and one for the negative numbers.
• Both series have showInLegend and enableMouseTracking set to false so the user cannot interact with them.
• Both series have stacking set to false so they will not be part of the "real" data you want to show.
• Both series have zIndex set to 0. I explain why below the code block.

The code for the "dummy" series is as follows.

// background for positive values
obj = {};
obj["name"] = 'patternFill';
obj["data"] = [120, 120];
obj["color"] = 'url(#highcharts-default-pattern-3)';
obj["grouping"] = false;
obj["zIndex"] = 0;
obj["enableMouseTracking"] = false;
obj["stacking"] = false;
obj["showInLegend"] = false;
seriesforSeniorUPT.push(obj);

// background for negative values
obj = {};
obj["name"] = 'patternFill';
obj["data"] = [-80, -80];
obj["color"] = 'url(#highcharts-default-pattern-3)';
obj["grouping"] = false;
obj["zIndex"] = 0;
obj["enableMouseTracking"] = false;
obj["stacking"] = false;
obj["showInLegend"] = false;
seriesforSeniorUPT.push(obj);

For the three "real" data series, I set zIndex to 10 to they will appear over the "dummy" series we're using for our patterend backgrounds.

For all of the series, I set grouping to false so they will appear one atop the other, not next to one another.

Here's a screenshot of the output. I hope this is helpful!