Inconsistent Bar Width Makes Columns Overlaps for Stacked Column Chart Type.

[arj]

Hi Team,

We are using stackedColumn chart type and passing the datapoints to canvas based on which it does the calculation and assign the data point width to each bar. But for fewer points the bar width calculated is much thicker making column bars overlap each other and for more data points the bar width calculated is thinner making bars also look very thin. Is there a way to control the bar point widths? Below is the sample data tried on fiddle –

Example1: More Data Points –
window.onload = function () {
var chart = new CanvasJS.Chart(“chartContainer”,
{
title:{
text: “Monitors”
},
data: [
{
type: “stackedColumn”,
dataPoints: [
{ x: new Date(1765823400000), y: null, isPadding: true },
{ x: new Date(1765825200000), y: 1 },
{ x: new Date(1765830540000), y: null },
{ x: new Date(1765830600000), y: 1 },
{ x: new Date(1765837740000), y: null },
{ x: new Date(1765837800000), y: 1 },
{ x: new Date(1765846740000), y: null },
{ x: new Date(1765846800000), y: 1 },
{ x: new Date(1765855740000), y: null },
{ x: new Date(1765855800000), y: 1 },
{ x: new Date(1765864740000), y: null },
{ x: new Date(1765864800000), y: 1 },
{ x: new Date(1765873740000), y: null },
{ x: new Date(1765873800000), y: 1 },
{ x: new Date(1765882740000), y: null },
{ x: new Date(1765882800000), y: 1 },
{ x: new Date(1765891740000), y: null },
{ x: new Date(1765891800000), y: 1 },
{ x: new Date(1765900740000), y: null},
{ x: new Date(1765900800000), y: 1 },
{ x: new Date(1765909740000), y: null }
]
}, {
type: “stackedColumn”,
dataPoints: [
{ x: new Date(1765823400000), y: null, isPadding: true },
{ x: new Date(1765825200000), y: 1 },
{ x: new Date(1765830540000), y: null },
{ x: new Date(1765830600000), y: 1 },
{ x: new Date(1765837740000), y: null },
{ x: new Date(1765837800000), y: 1 },
{ x: new Date(1765846740000), y: null },
{ x: new Date(1765846800000), y: 1 },
{ x: new Date(1765855740000), y: null },
{ x: new Date(1765855800000), y: 1 },
{ x: new Date(1765864740000), y: null },
{ x: new Date(1765864800000), y: 1 },
{ x: new Date(1765873740000), y: null },
{ x: new Date(1765873800000), y: 1 },
{ x: new Date(1765882740000), y: null },
{ x: new Date(1765882800000), y: 1 },
{ x: new Date(1765891740000), y: null },
{ x: new Date(1765891800000), y: 1 },
{ x: new Date(1765900740000), y: null},
{ x: new Date(1765900800000), y: 1 },
{ x: new Date(1765909740000), y: null }
]
}, {
type: “stackedColumn”,
dataPoints: [
{ x: new Date(1765823400000), y: null, isPadding: true },
{ x: new Date(1765825200000), y: 1 },
{ x: new Date(1765830540000), y: null },
{ x: new Date(1765830600000), y: 1 },
{ x: new Date(1765837740000), y: null },
{ x: new Date(1765837800000), y: 1 },
{ x: new Date(1765846740000), y: null },
{ x: new Date(1765846800000), y: 1 },
{ x: new Date(1765855740000), y: null },
{ x: new Date(1765855800000), y: 1 },
{ x: new Date(1765864740000), y: null },
{ x: new Date(1765864800000), y: 1 },
{ x: new Date(1765873740000), y: null },
{ x: new Date(1765873800000), y: 1 },
{ x: new Date(1765882740000), y: null },
{ x: new Date(1765882800000), y: 1 },
{ x: new Date(1765891740000), y: null },
{ x: new Date(1765891800000), y: 1 },
{ x: new Date(1765900740000), y: null},
{ x: new Date(1765900800000), y: 1 },
{ x: new Date(1765909740000), y: null }
]
}
]
});
chart.render();
}

Example2: Less data points
window.onload = function () {
var chart = new CanvasJS.Chart(“chartContainer”,
{
title:{
text: “Monitors”
},
data: [
{
type: “stackedColumn”,
dataPoints: [
{ x: new Date(1763792157598), y: null, isPadding: true },
{ x: new Date(1765641600000), y: 1 },
{ x: new Date(1766376000000), y: null, isPadding: true }
]
}, {
type: “stackedColumn”,
dataPoints: [
{ x: new Date(1763792157598), y: null, isPadding: true },
{ x: new Date(1765224000000), y: 1 },
{ x: new Date(1766376000000), y: null, isPadding: true }
]
}, {
type: “stackedColumn”,
dataPoints: [
{ x: new Date(1763792157598), y: null, isPadding: true },
{ x: new Date(1765915200000), y: 1 },
{ x: new Date(1766376000000), y: null, isPadding: true }
]
}, {
type: “stackedColumn”,
dataPoints: [
{ x: new Date(1763792157598), y: null, isPadding: true },
{ x: new Date(1765915200000), y: 1 },
{ x: new Date(1766376000000), y: null, isPadding: true }
]
}, {
type: “stackedColumn”,
dataPoints: [
{ x: new Date(1763792157598), y: null, isPadding: true },
{ x: new Date(1765224000000), y: 1 },
{ x: new Date(1766376000000), y: null, isPadding: true }
]
}
]
});
chart.render();
}