Home forums Report Bugs Column are skewed in dateTime axis type

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #28646

    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

    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

    #28668

    @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

    #28670

    @Shashi 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
          }]
        }]
    });
    #28689

    @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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.