Highcharts x-range chart datetime type for x and y axis

Question

I have created an x-range chart to represent some ranges. I want to make both x-axis and the y-axis as DateTime types. Currently, both the x and y-axis are numbers. I have created a fiddle to show my current behavior.

How can I make the x and the axis DateTime type?

https://jsfiddle.net/bonyfus/t4vz0Lkw/

 Highcharts.chart('container', {
  chart: {
    type: 'xrange',
    animation: false,
    inverted: true    
  },
  credits: false,
  exporting: false,
  title: {
    text: 'Highcharts X-range'
  },
  plotOptions: {
    series: {
      pointPadding: 0,
      pointWidth: 20,
      borderWidth: 0,
      borderRadius: 0,
      grouping: false,
    },
  },

  xAxis: {   
    gridLineWidth: 1,
    reversed: false,
    tickInterval: 1,
    startOnTick: true,
    endOnTick: true,   
    min: 0,
    max: 23,
    title: {
      text: 'Hours',
    }

  },
  yAxis: {
    min: 0,
    max: 7,
    tickInterval: 1,  
    tickWidth: 1,

    gridLineWidth: 1,
    endOnTick: false,
    startOnTick: false,
    reversed: false,
    title: {
      text: 'Days',
    }     
  },
 legend: {
    useHTML: true,
    y: 0,
    enabled: true,
    floating: false,
    align: 'right',
    layout: 'vertical',
    margin: 0,
    verticalAlign: 'top',
    symbolWidth: 30,
    symbolHeight: 22,
    symbolRadius: 0,
    squareSymbol: false,
    borderWidth: 0,
    itemDistance: 10,
    itemMarginBottom: 6,
    itemStyle: {
      fontSize: '12px',
      fontWeight: 'normal',
      textAlign: 'center',
      padding: '0px',      
      opacity: 1,
    },
    itemHoverStyle: {
      opacity: 1,      
      fontWeight: 'bold',
    },
    itemHiddenStyle: {
      opacity: 0.7      
    },
  },
    
  series: [{
      name: 'Drilling',
      data: [{
          x: 0.01,
          x2: 0.04,
          y: 1,
          color: 'blue',
        },
        {
          x: 20,
          x2: 23,
          y: 1,
          color: 'blue',
        },
      ],
      dataLabels: {
        enabled: true
      }
    },
    {
      name: 'Tripping',
      data: [{
        x: 10,
        x2: 15,
        y: 5,
      }, ],
      dataLabels: {
        enabled: true
      }
    },
    {
      name: 'Sliding',
      data: [{
        x: 15,
        x2: 20,
        y: 5,
        color: 'green',
      }, ],
      dataLabels: {
        enabled: true
      }
    },
    {
      name: 'Circulating',
      data: [{
          x: 20,
          x2: 23,
          y: 5,
          color: 'purple',
        },
        {
          x: 20,
          x2: 23,
          y: 6,
          color: 'purple',
        }
      ],
      dataLabels: {
        enabled: true
      }
    }
  ]

});

Answer 1

First of all, please notice that in the chart, the x-axis is usually the horizontal one.
When you invert the chart the x-axis is now vertical.

In order to change the axis type to datetime you have to properly declare the data. Usually, it's declared in milliseconds, or you might set the date and use the Date.UTC method to convert that into milliseconds as I did it in the demo below. The confix below for the y-axis is for the horizontal axis in this case.

 yAxis: {
    type: 'datetime',
    min: Date.UTC(2020, 11, 5, 0, 0, 0),
    tickInterval: 60 * 60 * 1000, // i hour interval, 
    endOnTick: false,
    startOnTick: false,
    reversed: false,
    title: {
      text: 'Days',
    }
  },

API:
https://api.highcharts.com/highcharts/xAxis.tickInterval

Demo:
https://jsfiddle.net/BlackLabel/bxqnkvm6/