график 'columnrange' с осью datetime

Question

Я настраиваю «столбчатый» график, в котором xAxis - это день недели, а ось Y - начало времени ожидания до конца времени сна, но я не могу понять его формат для время на оси Y, когда я делаю new Date(time).getTime(), это показывает разницу в графике.

Я пытаюсь получить массив с [xAxisPosition, end, start];

Данные:

const mockSleep = [
  {
    date: "2019-06-10",
    asleep: {
    startTime: "2019-06-09T18:00:00Z",
     endTime: "2019-06-10T023:07:07Z",
     hours: 8
     },
    inBed: {
      startTime: "2019-06-08T20:00:00Z",
      endTime: "2019-06-09T03:07:07Z",
      hours: 7
    }
  }

Попробуйте отформатировать:

const sleep1 = obj => {
  return obj.map(({ date, inBed }) => {
    const { startTime, endTime } = inBed;

    const xAxisPosition = new Date(date).getTime();
    const start = new Date(startTime).getTime();
    const end = new Date(endTime).getTime();

    return [xAxisPosition, start, end];
  });
};

параметры графика:

const options = {
  title: {
    text: "Sleep vs Activity"
  },

  yAxis: {
    opposite: true,
    type: "datetime",
    tickmarkPlacement: "on",
    tickInterval: 3600 * 1000,
    dateTimeLabelFormats: {
      second: "%H:%M:%S",
      minute: "%H:%M:%S",
      hour: "%H:%M:%S",
      day: "%H:%M:%S",
      week: "%H:%M:%S",
      month: "%H:%M:%S",
      year: "%H:%M:%S"
    },
    labels: {
      formatter: function() {
        return Highcharts.dateFormat("%H:%M %p", this.value);
      }
    }
  },

  xAxis: {
    type: "datetime",
    tickmarkPlacement: "on",
    units: [["day", [1]], ["week", [1]], ["month", [1, 3, 6]], ["year", 1]],
    dateTimeLabelFormats: {
      day: "%a"
    }
  },

  legend: {
    enabled: false
  },

  plotOptions: {
    series: {
      pointWidth: 30
    }
  },

  // tooltip: {
  //   enabled: false
  // },

  series: [
    {
      type: "columnrange",
      color: "red",
      data: sleep1(mockSleep)
    }
  ]
};

Вот так должен выглядеть