Добрый день. Хочу сделать график как на скриншоте:

Делаю так:
var options = {
series: [{
name: 'Website Blog',
type: 'column',
data: longList,
},
{
name: 'Social Media',
type: 'column',
data: shortList,
},
{
name: 'Social Media',
type: 'line',
data: longShortRateList,
}],
chart: {
height: 350,
type: 'bar',
stacked: true,
stackType: '100%',
},
stroke: {
width: [0, 8]
},
title: {
text: 'Traffic Sources'
},
dataLabels: {
enabled: true,
enabledOnSeries: [1]
},
labels: ['01 Jan 2001', '02 Jan 2001', '03 Jan 2001', '04 Jan 2001', '05 Jan 2001', '06 Jan 2001', '07 Jan 2001', '08 Jan 2001', '09 Jan 2001', '10 Jan 2001', '11 Jan 2001', '12 Jan 2001', '13 Jan 2001', '14 Jan 2001', '15 Jan 2001', '16 Jan 2001', '17 Jan 2001', '18 Jan 2001', '19 Jan 2001', '20 Jan 2001', '21 Jan 2001', '22 Jan 2001', '23 Jan 2001', '24 Jan 2001', '25 Jan 2001', '26 Jan 2001', '27 Jan 2001', '28 Jan 2001', '29 Jan 2001'],
xaxis: {
type: 'datetime'
},
yaxis: [{
title: {
text: 'Website Blog',
},
}, {
opposite: true,
title: {
text: 'Social Media'
}
}]
};
var chart = new ApexCharts(document.querySelector("#longshort"), options);
chart.render();
Используя параметры stacked: true, stackType: '100%' колонки не склеиваются, а ставится дополнительная колонка и нету самой линии, не могу понять, как сделать колонки с линией как на скриншоте ?