title: Highcharts - change seconds to time (H:M:S) in data labels
body: <p>How to change the value on the chart to present it as HH:MI:SS and not as a seconds?</p>
  
  <p><img src="https://i.stack.imgur.com/48YTl.png" alt="enter image description here"></p>
  
  <pre><code>$(function () {
          $('#container').highcharts({
              chart: {
                  type: 'line'
              },
              title: {
                  text: ''
              },
              xAxis: {
                  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
              },
              yAxis: [{
                  title: {
                      text: 'Temperature (°C)'
                  }
              },{ // Secondary yAxis
                  title: {
                      text: 'Rainfall'
                  },
                   gridLineWidth: 0,
                      type: 'datetime', //y-axis will be in milliseconds
                      dateTimeLabelFormats: { //force all formats to be hour:minute:second
                          second: '%H:%M:%S',
                          minute: '%H:%M:%S',
                          hour: '%H:%M:%S',
                          day: '%H:%M:%S',
                          week: '%H:%M:%S',
                          month: '%H:%M:%S',
                          year: '%H:%M:%S'
                      },
                  opposite: true
              }],
              plotOptions: {
                  line: {
                      dataLabels: {
                          enabled: true
                      },
                      enableMouseTracking: false
                  }
              },
              series: [{
                  name: 'Tokyo',
                  yAxis: 1,
                  data: [17.0*1000, 16.9*1000, 19.5*1000, 114.5*1000, 118.4*1000, 121.5*1000, 125.2*1000, 126.5*1000, 123.3*1000, 118.3*1000, 113.9*1000, 19.6*1000]
              }, {
                  name: 'London',
                  data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
              }]
          });
      });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/9UGJc/" rel="nofollow noreferrer">http://jsfiddle.net/9UGJc/</a></p>
  
  <p><strong>Working example:</strong>
  <a href="http://jsfiddle.net/9UGJc/3/" rel="nofollow noreferrer">http://jsfiddle.net/9UGJc/3/</a></p>
  
  <pre><code>$(function () {
          $('#container').highcharts({
              chart: {
                  type: 'line'
              },
              title: {
                  text: ''
              },
              xAxis: {
                  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
              },
              yAxis: [{
                  title: {
                      text: 'Temperature (°C)'
                  }
              },{ // Secondary yAxis
                  title: {
                      text: 'Rainfall'
                  },
                   gridLineWidth: 0,
                      type: 'datetime', //y-axis will be in milliseconds
                      dateTimeLabelFormats: { //force all formats to be hour:minute:second
                          second: '%H:%M:%S',
                          minute: '%H:%M:%S',
                          hour: '%H:%M:%S',
                          day: '%H:%M:%S',
                          week: '%H:%M:%S',
                          month: '%H:%M:%S',
                          year: '%H:%M:%S'
                      },
                  opposite: true
              }],
              plotOptions: {
                  line: {
                      dataLabels: {
                          enabled: true,
                          formatter: function(){
                              if( this.series.index == 0 ) {
                                  return secondsTimeSpanToHMS(this.y/1000) ;
                              } else {
                                  return this.y;
                              }
                          }
                      },
                      enableMouseTracking: false
                  }
              },
              series: [{
                  name: 'Tokyo',
                  yAxis: 1,
                  data: [17*1000, 16*1000, 19*1000, 114*1000, 118*1000, 121*1000, 125*1000, 126*1000, 123*1000, 118*1000, 113*1000, 19*1000]
              }, {
                  name: 'London',
                  data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
              }]
          });
      });
  
  function secondsTimeSpanToHMS(s) {
      var h = Math.floor(s / 3600); //Get whole hours
      s -= h * 3600;
      var m = Math.floor(s / 60); //Get remaining minutes
      s -= m * 60;
      return h + ":" + (m &lt; 10 ? '0' + m : m) + ":" + (s &lt; 10 ? '0' + s : s); //zero padding on minutes and seconds
  }
  </code></pre>