Highcharts stacked columns based on each day value - highcharts

Question

i'm trying to make a stacked column chart based on the following values
[
{
"date": "2019-06-08",
"profileId": "2978",
"likes": "48",
"source": "text",
"brand": "Pepsi",
"comments": "8",
"followers": "23443",
"ER": "1.00439"
},
{
"date": "2019-06-10",
"profileId": "6456",
"likes": "93",
"source": "media",
"brand": "pepsi",
"comments": "3",
"followers": "54482",
"ER": "0.99969"
},
{
"date": "2019-06-10",
"profileId": "6215",
"likes": "457",
"source": "media",
"brand": "pepsi",
"comments": "11",
"followers": "233113",
"ER": "1.00818"
}
]
and here's the chart object
const brandsValueChartOptions = {
chart: {
type: 'column',
}
credits: {
enabled: false,
},
xAxis: {
title: {
text: 'Date',
},
categories: brandsValue.x,
labels: {
formatter: function() {
return moment(this.value).format('Do MMM')
},
},
crosshair: true,
grouping: true
},
yAxis: {
min: 0,
title: {
text: 'Value (in USD)',
},
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span>',
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
stacking: 'normal',
},
},
series: {
stacking: 'true'
}
},
series: brandsValue.y,
}
and here how i process the data on the structure the results object to be used in the chart object above.
const brandsValue = {
x: [],
y: [],
}
let colorIndex = 0
_.chain(data)
.map(brand => {
return {
...brand,
day: brand.date,
brand: _.capitalize(brand.brand.toLowerCase()),
}
})
.forEach(brand => brandsValue.x.push(brand.day))
.groupBy(brand => brand.brand)
.forEach(items => {
if (values.mediaTypeSelected === 'posts') {
items.forEach(item => {
let followersCount = parseInt(item.followers)
let er = parseFloat(item.ER)
item.finalCost = 100 * er
item.date = new Date(item.date).getTime()
return item
})
}
})
.forEach(item => {
let sorted = _.sortBy(item, i => moment(i.date))
let values = {
name: item[0].brand,
color: "#cccccc",
data: [],
}
sorted.forEach(i => {
if (this.state.mediaTypeSelected === 'posts') {
values.data.push([
moment(i.date).format('Do MMM'),
parseInt(i.finalCost),
i.profileId,
])
}
})
brandsValue.y.push(values)
})
.value()
The problem here, is that the x-axis values aren't grouped/stacked based on the date, i've tried several solutions with no luck,
here's how the chart results looks like