Format categories (x-axis) for highcharts

Question

I have a workingHighcharts stacked area chart I am working with. The x-axis consists of epoch timestamps, but I would like to translate them into human readable times. In the past I have done something like this:

tooltip: {
    formatter: function() {
        return Highcharts.numberFormat(this.y) + ' packets<b> | </b>' + Highcharts.dateFormat('%H:%M:%S', this.x);
    }

To get the time from an epoch time to a regular time, but now things are a bit different. On my chart now this is how the x-axis looks:

xAxis: {
  categories: $scope.alltimes,
  tickmarkPlacement: 'on',
  title: {
    enabled: false
  }

Where $scope.alltimes is the array of all epoch timestamps. There are 23 items in the array and that's what I use for all of the points on the x-axis. I cannot do the same thing I have done in the past previously, because as far as I know there is no formatter for categories since they directly feed the x-axis. I would also like to do the same thing inside of the tooltip, which I could do the same way as the old way, but it would be inconsistent. Why not do it in one place since the tooltip and categories feed from the same data source. I have a plunker I have been working on here .

Answer 1

To do this on your xAxis use the labels.formatter function:

  labels: {
    formatter: function() {
        return Highcharts.dateFormat('%H:%M:%S', parseInt(this.value, 10));
    }
  }

You can use this same formatting in your tooltip as well using tooltip.formatter .