title: Highcharts x-range chart datetime type for x and y axis
body: <p>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.</p>
  <p>How can I make the x and the axis DateTime type?</p>
  <p><a href="https://jsfiddle.net/bonyfus/t4vz0Lkw/" rel="nofollow noreferrer">https://jsfiddle.net/bonyfus/t4vz0Lkw/</a></p>
  <pre><code> 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
        }
      }
    ]
  
  });
  </code></pre>