Highcharts marker alignment not matched with Axis gridlines

Question

options passed like below:

var chartOptions = {
                        chart: {
                            backgroundColor: 'white',
                            type:'line'
                        },
                        title: { 
                            text:null
                        },
                        xAxis: {
                            gridLineWidth:0.5,
                            gridLineColor:'#e1e1e1',
                            tickInterval:intervalPeriod,
                            tickWidth: 0,
                            type: 'datetime',
                            dateTimeLabelFormats: dateTimeLabelFormats
                        },  
                        yAxis: {
                            gridLineWidth:0.5,
                            gridLineColor:'#e1e1e1',
                            allowDecimals:false,
                            tickAmount: 5,
                            title: {
                                text: null
                            }
                        },
                        tooltip:{
                            shared:true,
                            xDateFormat:'%e  %b, %Y',
                            crosshairs:true
                        }
                }

Answer 1

You need to have the same value for tickInterval and pointInterval in order to display tick synced with series' points. When points have irregular intervals, then you can use tickPositions array.

API Reference:
http://api.highcharts.com/highcharts/xAxis.tickInterval
http://api.highcharts.com/highcharts/plotOptions.series.pointInterval
http://api.highcharts.com/highcharts/xAxis.tickPositions

Example:
http://jsfiddle.net/zycwaexa/ - using the same tickInterval and pointInterval http://jsfiddle.net/z7pnwtrs/ - using tickPositions