user3501613 user3501613 - 5 months ago 63
Javascript Question

Draw Line in Bar with negative stack in HighCharts

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

enter image description here

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

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: