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 Articles