How to coordinate 2 charts

Question

Goal: Create two graps one of line type, another of type columnrange. I use react-highcharts, highcharts-more, highchartsExporting. X axis in both cases is type:datetime. And use timestamp (ms).

let eventsChartOpts = {
  chart: {
    type: 'columnrange',
    inverted: true,
    spacingTop: 0,
    spacingBottom: 0,
  plotOptions: {
    series: {
      borderRadius: 3,
      dataLabels: {
        align: 'left',
        enabled: true,
        inside: true,
        formatter: function() {
          if (!this.key)
            return null;
          return this.key;
        },
        padding: 5,
        style: {
          fontWeight: 'normal',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          textShadow: 'none',
          whiteSpace: 'nowrap'
        },
        useHTML: true
      }
    }
  },
  series:events,
  tooltip: {
    enabled: false
  },
  xAxis: {
    visible: false
  },
  yAxis: {
    min: moment(dates[1]).unix()*1000,
    max: moment(dates[dates.length-1]).unix()*1000,
    minTickInterval: 24 * 60 * 60 * 1000, // one day
    opposite: true,
    showFirstLabel: false,
    showLastLabel: false,
    type:'datetime' 
  },
};

and

let config = {
  chart:{
    type: 'line',
    spacingTop: 0,
    spacingBottom: 0,
    },
    title: {
      text: null
    },
    xAxis: {
      crosshair: {
        color: '#e3e3e3',
        snap: true
      },
      gridLineWidth: 1,
      labels: {
        align: 'center'
      },
      min: moment(dates[0]).unix()*1000,
      max: moment(dates[dates.length-1]).unix()*1000,
      minTickInterval: 24 * 60 * 60 * 1000, // one day
      showFirstLabel: false,
      showLastLabel: false,
      type: 'datetime'
    },
    yAxis: {
      maxPadding: 0.1,
      reversed: false,
      visible: false
    },
    series:rates
};

But what i get:

X axes, don't match, although settings is the same. I don't understand why. I thought problem in padding, but no, i have equal padding. I need your help.