Highstock xAxis categories not aligned

Question

I am using highstock One can change chart_type to spline or line. The problem I am facing is the x axis categories is not aligned with the data, which is not case in general.

This is the jsfiddle : http://jsfiddle.net/nishants/sg7ykLpe/1/

$(function () {
    $('#container').highcharts("StockChart", {
        chart: {
            type: 'column',//One can change chart_type to spline or line.
            inverted:0
         },
        title: {
            text: 'Title of the chart',
            style: {
                fontFamily: "lato"
            }
        },
        subtitle: {
            text: '',
            style: {
                fontFamily: "lato"
            }
        },

        yAxis: 
        {
            gridLineWidth: 0,

            title: {
                text: '',  
            },
            labels:{
                enabled:0,
                formatter: function() {
                    return  this.value; ;
                }
            },
            stackLabels:{
                enabled:0
            },

            //min:1,// Avoided generally so in if clause, to handle  specific cases.


        },
        tooltip: {
            enabled: 1,
            formatter: function() {
                return new Date(this.x).toDateString(); ;
            }
        },
        legend:{
            enabled:1
        },
        plotOptions: {
            column: {
                dataLabels: {

                    color: 'white',

                    enabled: 1,
                    style: {
                        //textShadow: '0 0 3px white, 0 0 3px white'
                    },


                    formatter:function(){
                        if (this.y) return this.y;
                    },
                    y:0
                    //color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || '#wihte',


                },
                enableMouseTracking: true
            },
            series: {

                    stacking: 'normal', //null , normal , percent

             }
        },
        series: [{'color': '#009add', 'data': [[1385625600000, 0], [1408003200000, 0], [1408348800000, 0], [1408521600000, 3], [1408608000000, 0]], 'name': 'TYPE1'}, {'color': '#f15d22', 'data': [[1385625600000, 0], [1408003200000, 1], [1408348800000, 0], [1408521600000, 0], [1408608000000, 0]], 'name': 'TYPE2'}, {'color': '#7182a6', 'data': [[1385625600000, 1], [1408003200000, 0], [1408348800000, 0], [1408521600000, 0], [1408608000000, 0]], 'name': 'TYPE3'}, {'color': '#62a60a', 'data': [[1385625600000, 0], [1408003200000, 0], [1408348800000, 2], [1408521600000, 1], [1408608000000, 2]], 'name': 'TYPE4'}]

        ,legend: {
            enabled: true,
            align: 'right',
            //backgroundColor: '#FCFFC5',
            //borderColor: 'black',
            //borderWidth: 2,
            layout: 'vertical',
            verticalAlign: 'top',
            y: 100,
            shadow: true
        },



    });
});

Answer 1

use tickPositions then by formatter convert your label values

in your case

xAxis: {
    // in tick position set all x axis values by this tick will come on this position    
    tickPositions: [1385625600000, 1408003200000, 1408348800000, 1408521600000, 1408608000000],
    labels: {
       /** then by formattor function change our tick value in desired result 
         * here we convert date string in date format like dd/mm/yy
        **/
       formatter: function () {
            return new Date(this.value).getDate()+"/"+(new Date(this.value).getMonth()+1)+"/"+new Date(this.value).getYear() ;
        }
    }

See Live DEMO