Chartjs not displaying data from a dynamic stored variable - chart.js

Question

I am having issue in representing two datasets on my chartjs chart when both of my data is from a stored variable. When both of my data {inbound & outbound} is from a stored(and unique) variable, It shows two line graph but having similar data with the inbound data list inheriting the outbound data list. The inbound and outbound data list are two separate data and should be shown as two unique datasets on the chart.
My code is this
var inbound = InboundSmsCountList;
var outbound = OutboundSmsCountList;
var ff = MonthDaysList;
var combined_arraysx = [InboundSmsCountList,OutboundSmsCountList];
var max2 = combined_arraysx.reduce(function(final, current) {
for (var i = 0; i < final.length; ++i) {
if (current[i] > final[i]) {
final[i] = current[i];
}
}
return final;
});
var maxValue = Math.max.apply(Math, max2);
console.log(maxValue);
var ctx6 = document.getElementById('chartBar6').getContext('2d');
var gradient1x = ctx6.createLinearGradient(0, 350, 0, 0);
gradient1x.addColorStop(0, 'rgba(241, 0, 117,0)');
gradient1x.addColorStop(1, 'rgba(241, 0, 567,.5)');
var gradient2x = ctx6.createLinearGradient(0, 280, 0, 0);
gradient2x.addColorStop(0, 'rgba(86, 87, 255,0)');
gradient2x.addColorStop(1, 'rgba(34, 45, 255,.5)');
var config = {
type: 'line',
data: {
labels: ff,//['May-01', 'May-02', 'May-03', 'May-04', 'May-05', 'May-06', 'May-07', 'May-08', 'May-09', 'May-10', 'May-11', 'May-12', 'May-13', 'May-14', 'May-15', 'May-16', 'May-17', 'May-18', 'May-19', 'May-20', 'May-21', 'May-22', 'May-23', 'May-24', 'May-25', 'May-26', 'May-27', 'May-28', 'May-29', 'May-30', 'May-31'],
datasets: [{
label: 'Outbound',
data: outbound,//[1, 2, 0, 0, 84, 0, 10, 16, 8, 0, 0, 0, 4, 4, 1, 0, 0, 0, 1, 5, 0, 1, 0, 0, 0, 0, 71, 0, 0, 0, 0],
borderColor: '#00cccc',
borderWidth: 1,
backgroundColor: gradient2x,
},{
label: 'Inbound',
data: inbound,//[0, 0, 0, 0, 5, 0, 0, 0, 6, 0, 0, 0, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0],
borderColor: '#00cccc',
borderWidth: 1,
backgroundColor: gradient1x,
}]
},
options: {
maintainAspectRatio: false,
legend: {
display: true,
position:"top",
labels: {
display: true
}
},
scales: {
xAxes: [{
//stacked: true,
barPercentage: 0.5,
ticks: {
beginAtZero:true,
fontSize: 11
},
gridLines: {
display: false,
drawBorder: true
},
}],
yAxes: [{
//stacked: true,
ticks: {
fontSize: 10,
color: '#97a3b9',
min: 0,
max: maxValue
},
gridLines: {
display: false,
drawBorder: true
},
}]
}
}
};
new Chart(ctx6, config );
when both data is from stored variable - see image
data: {
labels: ff,//['May-01', 'May-02', 'May-03', 'May-04', 'May-05', 'May-06', 'May-07', 'May-08', 'May-09', 'May-10', 'May-11', 'May-12', 'May-13', 'May-14', 'May-15', 'May-16', 'May-17', 'May-18', 'May-19', 'May-20', 'May-21', 'May-22', 'May-23', 'May-24', 'May-25', 'May-26', 'May-27', 'May-28', 'May-29', 'May-30', 'May-31'],
datasets: [{
label: 'Outbound',
data: outbound,
borderColor: '#00cccc',
borderWidth: 1,
backgroundColor: gradient2x,
},{
label: 'Inbound',
data: inbound,
borderColor: '#00cccc',
borderWidth: 1,
backgroundColor: gradient1x,
}]
}
when outbound data is a stored variable while the inbound data is raw list/array it shows correct graph-two separate datasets - see image
data: {
labels: ff,//['May-01', 'May-02', 'May-03', 'May-04', 'May-05', 'May-06', 'May-07', 'May-08', 'May-09', 'May-10', 'May-11', 'May-12', 'May-13', 'May-14', 'May-15', 'May-16', 'May-17', 'May-18', 'May-19', 'May-20', 'May-21', 'May-22', 'May-23', 'May-24', 'May-25', 'May-26', 'May-27', 'May-28', 'May-29', 'May-30', 'May-31'],
datasets: [{
label: 'Outbound',
data: outbound,
borderColor: '#00cccc',
borderWidth: 1,
backgroundColor: gradient2x,
},{
label: 'Inbound',
data: [0, 0, 0, 0, 5, 0, 0, 0, 6, 0, 0, 0, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0],
borderColor: '#00cccc',
borderWidth: 1,
backgroundColor: gradient1x,
}]
}
Can someone advise how to fix this?
Thank you.