Высокие диаграммы: синхронизация тиков оси по нескольким графикам

Question

У меня проблема с синхронизацией тиков двух разных графиков Highcharts.

Первый график показывает однодневные события, второй график показывает непрерывные события.И есть требования к xAxis, которые нужно синхронизировать.В интернете я нашел примеры синхронизации, но что-то идет не так.На рисунке мы видим, что в какой-то момент тики начинают не синхронизироваться.Мой код На jsfiddle и там:

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

Вам необходимо отключить опцию endOnTick для yAxis, поскольку она включена по умолчанию:

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

Демонстрационная версия: https://jsfiddle.net/BlackLabel/dex475zj/

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