title: High Chart set x axis value in hours format
body: <p>I am using High chart for graph plotting. I want x axis in hours format like this [00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23]<br>
   and also i don't want to use categories parameter which i had commented  </p>
  
  <p>Below is Js 
  </p>
  
  <pre class="lang-js prettyprint-override"><code>$('#container').highcharts({
                  chart: {
                      zoomType: 'xy'
                  },
  
                  title: {
                      text: 'Average Monthly Temperature and Rainfall in Tokyo'
                  },
                  subtitle: {
                      text: 'Source: WorldClimate.com'
                  },
                  xAxis: [{
                      //categories: ['00', '01', '02', '03', '04', '05',
                          //'06', '07', '08', '09', '10', '11']
                          labels: {
                              formatter: function() {
                              return Highcharts.dateFormat('%H', this.value);
  
                          },
                          style: {
                              color: '#89A54E'
                          },
  
                          }
  
                  }],
                  yAxis: [{ // Primary yAxis
                      labels: {
                          //format: '{value}°C',
                          style: {
                              color: '#89A54E'
                          }
                      },
                      min:0,
                      //max:4,
                      tickInterval:2,
  
                      title: {
                          text: 'Temperature',
                          style: {
                              color: '#89A54E'
                          }
                      }
                  }, { // Secondary yAxis
                      title: {
                          text: 'Rainfall',
                          style: {
                              color: '#4572A7'
                          }
                      },
                      max:240,
                      tickInterval:50,
                      labels: {
                          //format: '{value} mm',
                          style: {
                              color: '#4572A7'
                          }
                      },
                      opposite: true
                  }],
                  tooltip: {
                      shared: true
                  },
                  legend: {
                      layout: 'vertical',
                      align: 'left',
                      x: 120,
                      verticalAlign: 'top',
                      y: 100,
                      floating: true,
                      backgroundColor: '#FFFFFF'
                  },
                  series: [{
                      name: 'spent',
                      color: '#4572A7',
                      type: 'column',
                      yAxis: 1,
                      data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                      tooltip: {
                          valueSuffix: ''
                      },
  
  
  
                  }, {
  
                      name: 'click',
                      color: '#89A54E',
                      type: 'spline',
                      yAxis: 1,
                      data: msg,
                      tooltip: {
                          valueSuffix: ''
                      }
                  },{
  
                      name: 'click',
                      color: '#89A54E',
                      type: 'spline',
  
                      data: [9.9, 1.5, 6.4, 9.2, 4.0, 6.0, 5.6, 8.5, 6.4, 4.1, 5.6, 4.4],
                      tooltip: {
                          valueSuffix: ''
                      }
                  }
  
                  ]
              });
  
      }
  });
  </code></pre>
  
  <p>X Axis  code:</p>
  
  <pre class="lang-js prettyprint-override"><code>xAxis: [{
                  //categories: ['00', '01', '02', '03', '04', '05',
                      //'06', '07', '08', '09', '10', '11']
                      labels: {
                          formatter: function() {
                          return Highcharts.dateFormat('%H', this.value);
  
                      },
                      style: {
                          color: '#89A54E'
                      },
  
                      }
  
              }],
  </code></pre>
  
  <p>Thanks in advance</p>