score:1

Accepted answer

You can do this by using the xAxis.labels.formatter. You need to come up with a solution to parse your decimal year into more readable times. To do this I used the code from this answer. Sample code set:

function leapYear(year) {
  return ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
}

function getMonthAndDayFromDayOfYear(dayOfYear, year) {
  var daysInMonthArray = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  if (leapYear(year)) {
    daysInMonthArray[2] = 29;
  }

  var daysLeft = dayOfYear;
  var month = 0;
  for (i = 0; i < daysInMonthArray.length; i++) {
    var daysInThisMonth = daysInMonthArray[i];
    if (daysLeft > daysInThisMonth) {
      month += 1;
      daysLeft -= daysInThisMonth;
    } else {
      break;
    }
  }
  return {
    month: month,
    day: daysLeft
  };
}

function convertDecimalDate(decimalDate) {
  decimalDate = parseFloat(decimalDate);
  var year = parseInt(decimalDate); // Get just the integer part for the year
  var daysPerYear = leapYear(year) ? 366 : 365; // Set days per year based on leap year or not
  var decimalYear = decimalDate - year; // A decimal representing portion of the year left
  var dayOfYear = Math.ceil(decimalYear * daysPerYear); // day of Year: 1 to 355 (or 366)
  var md = getMonthAndDayFromDayOfYear(dayOfYear, year);
  var day = md['day'];
  var month = md['month'];
  return new Date(year, month, day);
}


Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  xAxis: {
    labels: {
      rotation: 45,
      formatter: function() {
        return convertDecimalDate(this.value);
      }
    }
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.series.name + '</b><br/>' +
        this.x + ': ' + this.y;
    }
  },
  series: [{
    data: [
      [2016.3610, 53.39000],
      [2016.3881, 53.29000],
      [2016.4153, 54.71000]
    ]
  }]
});

Live demo.

You can use the same method for the tooltip formatter as well. Note that I did not pick out a particular data time format as you did not specify what you need (month/year, or day/month, etc).

score:0

Highcharts reads time in milliseconds, that is the only acceptable way of stating time.

See highcharts API on series.data.x.

So to go from your timestamp, you will need to convert it.

That said, if you do not care about dates, you can use your points as input. Highcharts will not recognize this as dates or time, but assuming that is how you want to show them, then that could work.


Related Query

More Query from same tag