Highcharts not formatting tooltip datetime according to xDateFormat setting

Question

According to the highcharts docs I should be able to simply set xDateFormat on the tooltip, however as you can see in this example below it is not taking that value:

var labels = [1470960000000, 1471046400000, 1471132800000, 1471219200000, 1471305600000, 1471392000000, 1471478400000, 1471564800000, 1471651200000, 1471737600000, 1471824000000, 1471910400000, 1471996800000, 1472083200000]
var sessions = [215595, 352712, 377663, 432526, 422030, 406581, 390111, 382508, 373602, 403029, 428661, 426250, 221721, 0]
var clicks = [49809, 62111, 58268, 120085, 117700, 101222, 97126, 112030, 85859, 60905, 80053, 85758, 21660, 0]
var pageviews = [330385, 552567, 593823, 676728, 670919, 649461, 628206, 610449, 602984, 638633, 675578, 685834, 345341, 0]

var chartOptions = {
  chart: {
    type: 'column',
    renderTo: 'chartcontainer'
  },
  xAxis: {
    type: 'datetime',
    categories: labels,
    labels: {
      formatter: function () {
        return Highcharts.dateFormat('%b %e', this.value)
      }
    }
  },
  yAxis: {
    stackLabels: {
      enabled: false
    }
  },
  tooltip: {
    shared: true,
    tooltip: {
      xDateFormat: '%a %b %e'
    }
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: false
      }
    }
  },
  series: [{
    name: 'Pageviews',
    data: pageviews
  }, {
    name: 'Sessions',
    data: sessions
  }, {
    name: 'Clicks',
    data: clicks
  }]
}

new Highcharts.Chart(chartOptions)

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="chartcontainer">

</div>

Answer 1

You stacked your tooltip configuration in a surplus object. Correct is:

tooltip: {
    shared: true,
    xDateFormat: '%a %b %e'
}

See: http://api.highcharts.com/highcharts/tooltip.xDateFormat

Adjusted Snippet below:

var labels = [1470960000000, 1471046400000, 1471132800000, 1471219200000, 1471305600000, 1471392000000, 1471478400000, 1471564800000, 1471651200000, 1471737600000, 1471824000000, 1471910400000, 1471996800000, 1472083200000]
var sessions = [215595, 352712, 377663, 432526, 422030, 406581, 390111, 382508, 373602, 403029, 428661, 426250, 221721, 0]
var clicks = [49809, 62111, 58268, 120085, 117700, 101222, 97126, 112030, 85859, 60905, 80053, 85758, 21660, 0]
var pageviews = [330385, 552567, 593823, 676728, 670919, 649461, 628206, 610449, 602984, 638633, 675578, 685834, 345341, 0]

var chartOptions = {
  chart: {
    type: 'column',
    renderTo: 'chartcontainer'
  },
  xAxis: {
    type: 'datetime',
    categories: labels,
    labels: {
      formatter: function () {
        return Highcharts.dateFormat('%b %e', this.value)
      }
    }
  },
  yAxis: {
    stackLabels: {
      enabled: false
    }
  },
  tooltip: {
    shared: true,
    xDateFormat: '%a %b %e'
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: false
      }
    }
  },
  series: [{
    name: 'Pageviews',
    data: pageviews
  }, {
    name: 'Sessions',
    data: sessions
  }, {
    name: 'Clicks',
    data: clicks
  }]
}

new Highcharts.Chart(chartOptions)

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="chartcontainer">

</div>