Column are skewed in dateTime axis type

[canvasjsUser001]

Can’t share a jsfiddle snippet since its sharing feature is disabled. But if you go to the jsfiddle demo you provide in this link
https://canvasjs.com/javascript-charts/stacked-column-chart/

and replace the js code with

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title:{
		text: "Google - Consolidated Quarterly Revenue",
		fontFamily: "arial black",
		fontColor: "#695A42"
	},
	axisX: {
		type: 'dateTime'
	},
	axisY:{
		valueFormatString:"$#0bn",
		gridColor: "#B6B1A8",
		tickColor: "#B6B1A8"
	},
	toolTip: {
		shared: true,
		content: toolTipContent
	},
	data: [
  {
    "type": "stackedColumn",
    "lineThickness": 1,
    "lineDashType": "solid",
    "markerType": "circle",
    "xValueType": "dateTime",
    "dataPoints": [
      {
        "x": 1583301600001,
        "y": 123
      },
      {
        "x": 1583906400000,
        "y": 354
      },
      {
        "x": 1583906399999,
        "y": 100
      },
      {
        "x": 1583906399998,
        "y": 200
      }
    ],
    "trueType": "column"
  }
]
});
chart.render();

function toolTipContent(e) {
	var str = "";
	var total = 0;
	var str2, str3;
	for (var i = 0; i < e.entries.length; i++){
		var  str1 = "<span style= \"color:"+e.entries[i].dataSeries.color + "\"> "+e.entries[i].dataSeries.name+"</span>: $<strong>"+e.entries[i].dataPoint.y+"</strong>bn<br/>";
		total = e.entries[i].dataPoint.y + total;
		str = str.concat(str1);
	}
	str2 = "<span style = \"color:DodgerBlue;\"><strong>"+(e.entries[0].dataPoint.x).getFullYear()+"</strong></span><br/>";
	total = Math.round(total * 100) / 100;
	str3 = "<span style = \"color:Tomato\">Total:</span><strong> $"+total+"</strong>bn<br/>";
	return (str2.concat(str)).concat(str3);
}

}

all columns are repositioned and reshaped to tiny line to the far right. and if you remove the first data point

{
“x”: 1583301600001,
“y”: 123
},

it will work as normal. This happens to both column chart and stackColumn chart

[Shashi Ranjan]

@canvasjsuser001,

The dataPoint with the value 1583301600001 denotes Mar 04, 2020 – present to the left extreme of the chart. As all other dataPoint values are of Mar 11, 2020, with slight differences in seconds they are rendered towards the right extreme of the chart. To understand it better, you can change the type to line as shown in this JSFiddle.

—
Shashi Ranjan
Team CanvasJS

[canvasjsUser001]

@ShashiRanjan yes, I understand there is some distance between Marh 04, 2020 and Mar 11, 2020. But I would expect the column on the right side to render fully rather than the skewed line.
I think it is still a bug, If you look at how highchart handles this.

go to link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-stacked/
copy paste following snippet into js section

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked column chart'
    },
  	xAxis: {
    labels: {
      formatter: function() {
        return Highcharts.dateFormat('%a %d %b', this.value);
      }
    }
    },
    yAxis: {
        title: {
            text: 'Total fruit consumption'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: ( // theme
                    Highcharts.defaultOptions.title.style &&
                    Highcharts.defaultOptions.title.style.color
                ) || 'gray'
            }
        }
    },
    legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor:
            Highcharts.defaultOptions.legend.backgroundColor || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true
            }
        }
    },
    series: [{
        name: 'John',
        data: [{x: 1583301600001, y: null}]
    }, {
        name: 'Jane',
        data: [{x: 1583906400000, y: 354}]
    }, {
        name: 'Joe',
        data: [{x: 1583906399999, y: null}]
    }, {
        data: [{
        "x": 1583906399998,
        "y": null
      }]
    }]
});

[Shashi Ranjan]

@canvasjsuser001,

Width of the dataPoint is dependent on multiple factors like number of dataPoints, viewport range, etc. In your case, the dataPoint width is limited to 1 pixel, which you can override by setting the dataPointMinWidth. Please take a look at this updated JSFiddle.

—
Shashi Ranjan
Team CanvasJS