Chart.js 2.0: How to change title of tooltip
<p>Forgive me for my sometimes poor English. Dutch is my native language.</p>

<p>I've created a Chart.js linechart which shows me my energy usage reported by my main power smart meter. I got it almost working like the way I want, but there is one thing I can't manage to get it to work in a way I want because I don't understand a little thing.</p>

<p>With some help of the user "iecs" at the topic <a href="https://stackoverflow.com/a/34855201/6660135">"Chart.js V2: Add prefix or suffix to tooltip label"</a> I was able to change the label at the tooltip. It now shows nicely my desired prefix and suffix:</p>

<pre><code>tooltips: {
    enabled: true,
    mode: 'single',
    backgroundColor: 'rgba(0,0,0,0.9)',
    titleFontSize: 14,
    titleFontStyle: 'bold',
    titleFontColor: "#FFF",
    bodyFontSize: 12,
    bodyFontStyle: 'normal',
    bodyFontColor: "#FFF",
    footerFontSize: 12,
    footerFontStyle: 'normal',
    footerFontColor: "#FFF",
    cornerRadius: 5,
    callbacks: {
        label: function(tooltipItems, data) { // Solution found on https://stackoverflow.com/a/34855201/6660135
            //Return value for label
            return 'Usage: ' + tooltipItems.yLabel*1000 + ' watt';
        }
    }
}
</code></pre>

<p>When I try to add exactly the same code to modify the title I got <code>undefined</code> at the place where a date and time should be displayed:</p>

<pre><code>tooltips: {
    enabled: true,
    mode: 'single',
    backgroundColor: 'rgba(0,0,0,0.9)',
    titleFontSize: 14,
    titleFontStyle: 'bold',
    titleFontColor: "#FFF",
    bodyFontSize: 12,
    bodyFontStyle: 'normal',
    bodyFontColor: "#FFF",
    footerFontSize: 12,
    footerFontStyle: 'normal',
    footerFontColor: "#FFF",
    cornerRadius: 5,
    callbacks: {
        title: function(tooltipItems, data) {
            //Return value for title
            return 'Date: ' + tooltipItems.xLabel + ' GMT+2';
        },
        label: function(tooltipItems, data) { // Solution found on https://stackoverflow.com/a/34855201/6660135
            //Return value for label
            return 'Usage: ' + tooltipItems.yLabel*1000 + ' watt';
    }
}
</code></pre>

<p>With the answer of user "Lukman" at the topic <a href="https://stackoverflow.com/a/1625271/6660135">"Print content of JavaScript object? [duplicate]"</a> I discovered that I can display the content of the "tooltipItems object":</p>

<pre><code>alert(tooltipItems.toSource())
</code></pre>

<p>This displayed an interesting difference regarding the "tooltipItems" object between the "title" and the "label".</p>

<p>The "tooltipItems" object at the "label" display this as content:</p>

<pre><code>({xLabel:"2016-08-07 23:41:57", yLabel:0.261, index:70, datasetIndex:0})
</code></pre>

<p>While the "tooltipItems" object at the "title" displays this as content:</p>

<pre><code>[{xLabel:"2016-08-07 23:41:57", yLabel:0.261, index:70, datasetIndex:0}]
</code></pre>

<p>The beginning characters and ending characters are different.
The one of "label" can be read with <code>tooltipItems.yLabel</code> but the one of "title" can't be read with <code>tooltipItems.xLabel</code> because it shows me "undefined". The whole title will now be <code>Date: undefined GMT+2</code> insteas of <code>Date: 2016-08-07 23:41:57 GMT+2</code></p>

<p>What did I mis? Can someone explain me the differences between the 2 outputs of the object contents of "tooltipItems" and how to read the "xLabel" and "yLabel" indexes?</p>