score:2

Accepted answer

like @strelok said, the code is in the <script> tag if you right click the page and view source.

xaxis: [
{ 
  type: 'datetime',
  tickinterval: 6 * 3600 * 1000,
  tickposition: 'inside',
  ticklength: 30,
  gridlinewidth: 1,
  gridlinecolor: '#f0f0f0',
  startontick: false,
  endontick: false,
  minpadding: 0,
  maxpadding: 0,
  offset: 30,
  showlastlabel: true,
  labels: {
    formatter: function(){
      return highcharts.dateformat('%h', this.value);
    }
  }
}, 
{ 
  linkedto: 0,
  tickinterval: 24 * 3600 * 1000,
  labels: {
  formatter: function(){
    return highcharts.dateformat(
      '<span style="font-size: 12px; font-weight: bold">%a</span>, %b %e', this.value);
    },
    align: 'left',
    x: 3
  },
  opposite: true,
  ticklength: 20,
  gridlinewidth: 1
}],

top part is for bottom labels, bottom part is for top labels from the looks of it.

edit:

give this a shot.

chart.getxaxis(1)
    .setlinkedto(0)
    .setgridlinewidth(1)
    .setopposite(true) 
    .settickinterval(24 * 3600 * 1000) // 24 hour tick intervals
    .setcategories("sat nov13", "sat nov14", "sat nov15", "sat nov16"); 

chart.getxaxis(0)
    .setgridlinewidth(1)
    .setcategories("18","00","06","12","18","00","06","12","18","00","06","12","18","00","06","12","18");
    .settickinterval(6 * 3600 * 1000) // 6 hour tick intervals
    .settickposition("inside")
    .setstartontick(false)
    .setendontick(false)
    .setoffset(30)
    .setshowlastlabel(true)

score:0

in case you use unix epoch timestamps for your dates and if you need it the timestamp to be displayed in date format - just set the type of the axis to datetime
for example:
xaxis: { type: 'datetime' } });

check this fiddle: http://jsfiddle.net/hnwbq/1/
reference: http://www.highcharts.com/ref/#xaxis--type


Related Query

More Query from same tag