High charts X-axis labeling

Question

I have a situation where I am trying to get x-axis category values to show up in the HighCharts chart lined up with the ticks rather than on center of each 'bin' on the x-axis. It seems using text "categories" in the x-axis is part of the issue. Is there an easy way to do this?

Here is a sample of the json.stringified version of my options and a screen shot:

 Highcharts.chart('container', {
   "chart":{  
      "renderTo":"",
      "zoomType":"xy",
      "alignTicks":false,
      "animation":false,
      "height":600,
      "type":"line",
      "backgroundColor":"#fff",
      "resetZoomButton":{  
         "theme":{  
            "fill":"white",
            "stroke":"silver",
            "r":0,
            "states":{  
               "hover":{  
                  "fill":"#7ac142",
                  "style":{  
                     "color":"white"
                  }
               }
            }
         }
      },
      "options3d":"",
      "panning":true,
      "panKey":"shift"
   },

   title: {
        text: 'Step line types, with null values in the series'
    },
 xAxis:{  
      "align":"left",
      "categories":[  
         "0:00",
         "1:00",
         "2:00",
         "3:00",
         "4:00",
         "5:00",
         "6:00",
         "7:00",
         "8:00",
         "9:00",
         "10:00",
         "11:00",
         "12:00",
         "13:00",
         "14:00",
         "15:00",
         "16:00",
         "17:00",
         "18:00",
         "19:00",
         "20:00",
         "21:00",
         "22:00",
         "23:00"
      ],
      "title":{  
         "text":"",
         "style":{  
            "color":"#3E576F",
            "font-family":"Verdana",
            "font-size":"12px"
         }
      }
   },
"series":[  
      {  
         "data":[  
            72.2,
            71.5,
            71.7,
            71.2,
            73.6,
            73.5,
            72,
            71.4,
            69.7,
            70.8,
            70.9,
            71.3,
            72,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null
         ],
         "name":"The Data",
         "color":"#1AC8ED"
      },
   ],

});

Example

Answer 1

This can be set using the tickmarkPlacement option. For categorized axis it defaults to between, while other axis have it on. You need to set it on.

For example (JSFiddle):

xAxis:{  
    tickmarkPlacement: 'on'
    // ...
}