title: How to configure Highcharts tooltip.headerFormat with getDate() + 5
body: <p>This should be super simple, but I cannot figure out how JavaScript function <code>getDate</code> works together with <a href="https://www.highcharts.com/" rel="nofollow noreferrer">Highcharts</a> datetime on xAxis. </p>
  
  <p>In my tooltip I want to display two dates in the header, like a date range for instance: 1960/1/1 - 1965/1/1.</p>
  
  <p>The first date is the <code>point.key</code> (which is a unix timestamp) from my data set, and I know how to set that, but the second date displayed has to be <strong><code>{5 years plus point.key}</code></strong>.</p>
  
  <p>Despite my limited knowledge of JavaScript I understand that JavaScript has a function:</p>
  
  <pre><code>function getdate() {
      var tt = document.getElementById('txtDate').value;
  
      var date = new Date(tt);
      var newdate = new Date(date);
  
      newdate.setDate(newdate.getDate() + 3);
  
      var dd = newdate.getDate();
      var mm = newdate.getMonth() + 1;
      var y = newdate.getFullYear();
  
      var someFormattedDate = mm + '/' + dd + '/' + y;
      document.getElementById('follow_Date').value = someFormattedDate;
  }
  </code></pre>
  
  <p>Is there any way I can use that function in my tooltip and generate second date in</p>
  
  <pre><code>tooltip.headerFormat: '&lt;span style="font-size: 16px"&gt;' +
                        '{point.key} - {point.key + 5 years}&lt;/span&gt;&lt;br/&gt;';
  </code></pre>
  
  <p><a href="https://jsfiddle.net/marialaustsen/w4k87jyo/" rel="nofollow noreferrer">Here is a fiddle.</a></p>