Highcharts: Syncing axis ticks across Multiple Charts

Question

I have a problem with syncing ticks of two distinct Highcharts charts.

First chart shows one day events, second chart shows continuous events. And there are requirements xAxis must be synced. In the internet I have found examples of syncing, but something goes wrong. In the picture we see that at some moment ticks start be not synced. My code On jsfiddle and there:

var weekInterval = 7 * 24 * 60 * 60 * 1000;

var startDate = new Date(2016, 1, 1).getTime();
var endDate = new Date(2017, 1, 1).getTime();

Highcharts.chart({
    chart: {
    renderTo: "chart_1",
    height: "350px",
    marginLeft: 100,  
    },
  title: {
    text: 'Chart 1'
  },
  yAxis: {
    title: {
        text: ''
    },
    labels: {
        enabled: false
    }
  },
  xAxis: {
    startOnTick: true,
    tickInterval: weekInterval,
    type: 'datetime',
    min: startDate,
    max: endDate,
    labels: {
        enabled: false
    }
  },
  series: [
    {
        data: constructFakeData1(startDate, endDate)
    }
  ]
})

Highcharts.chart({
    chart: {
    renderTo: "chart_2",
    height: "350px",
    inverted: true,
    marginLeft: 100,  
    },
  title: {
    text: 'Chart 2'
  },  
  xAxis: {
    title: {
        text: ''
    },
    labels: {
        enabled: false
    }
  },
  yAxis: {
    startOnTick: true,
    tickInterval: weekInterval,
    type: 'datetime',
    min: startDate,
    max: endDate,
    labels: {
        enabled: false
    }
  },
  series: [
    {
        type: 'columnrange',
        data: constructFakeData2(startDate, endDate)
    }
  ]
})


function constructFakeData1(startDate, endDate) {   
    var data = []

  for (var x = startDate; x < endDate; x += weekInterval) {
    data.push({
        x: x,
      y: Math.random() * 100
    }); 
  }

  return data;
}

function constructFakeData2(startDate, endDate) {   
    return  [[0, startDate, (startDate + endDate) / 2],
    [1, startDate / 3, endDate / 3],
    [2, startDate, endDate]]
}

Answer 1

You need to disable endOnTick option for yAxis , because it is enabled by default:

yAxis: {
    endOnTick: false,
    ...
},

Live demo: https://jsfiddle.net/BlackLabel/dex475zj/

API: https://api.highcharts.com/highcharts/yAxis.endOnTick