javascript - HighCharts line series not displaying properly with stacked bar combo chart -

the line series don't match up.

$(function () {   $('#container').highcharts({     title: {         text: 'combination chart'     },     xaxis: {         categories: ['apples', 'oranges', 'pears', 'bananas', 'plums']     },     labels: {         items: [{             html: 'total fruit consumption',             style: {                 left: '50px',                 top: '18px',                 color: (highcharts.theme && highcharts.theme.textcolor) || 'black'             }         }]     },     plotoptions: {         series: {             stacking: 'normal'         }     },     series: [{         type: 'column',         name: 'jane',         data: [3, 2, 1, 3, 4],         stack: 0     }, {         type: 'column',         name: 'john',         data: [2, 3, 5, 7, 6],         stack: 0     }, {         type: 'column',         name: 'joe',         data: [4, 3, 3, 9, 0],         stack: 0     }, {         type: 'line',         name: 'average',         data: [3, 2.67, 3, 6.33, 3.33],         marker: {             linewidth: 2,             linecolor: highcharts.getoptions().colors[3],             fillcolor: 'white'         }     }, {         type: 'line',         name: 'total consumption',         data: [3, 2.67, 3, 6.33, 3.33],         center: [100, 80],         size: 100,         showinlegend: false,         datalabels: {             enabled: false         }     }]   }); }); 

here's fiddle show i'm doing:

http://jsfiddle.net/tn7b0fb0/

the numbers line's same, why aren't on top of eachother?

if unstack bar charts, looks right.

remove stacking: 'normal' plotoptions, , apply individually @ series level, column series only.

updated jsfiddle