I am using Chart.js with Angular2. I am giving input of (x,y) coordinates. where x is timestamp and y are different values. The tooltip displays the timestamp and not the time format i want to see. Here on the pluncker i have done the code please have a look and help me.PLUNKER for my char.js code using Angular2.
I am having little trouble understanding how the x-axis is displaying the time. The Chart.js documentation is horrible and really tough to understand, i am relying on stackoverflow for all my doubts.
Here is the options for my charts that is printing the date. I am unable to understand what to write in tooltip option here.
private options = {
scales: {
xAxes: [{
tooltipFormat:'',
type: 'time',
time: {
displayFormats: {
'millisecond': 'HH:mm:ss',
'second': 'HH:mm:ss',
'minute': 'HH:mm:ss',
'hour': 'HH:mm:ss',
'day': 'HH:mm:ss',
'week': 'HH:mm:ss',
'month': 'HH:mm:ss',
'quarter': 'HH:mm:ss',
'year': 'HH:mm:ss',
}
}
}]
}
};
the tooltipFormat option is documented here: http://www.chartjs.org/docs/#scales-time-scale
it should be added under the time sub option as mentioned in the doc.
tooltipFormat: The moment js format string to use for the tooltip.
go to https://momentjs.com/docs/ to find the correct format. For example, if you wanted MM/DD/YYYY format ie. 04/27/2017 try this:
plunker: http://plnkr.co/edit/xntCXNiaL5rFVpy2VATN?p=preview
scales: {
xAxes: [{
type: 'time',
time: {
tooltipFormat:'MM/DD/YYYY', // <- HERE
displayFormats: {
'millisecond':'HH:mm:ss',
'second': 'HH:mm:ss',
'minute': 'HH:mm:ss',
'hour': 'HH:mm:ss',
'day': 'HH:mm:ss',
'week': 'HH:mm:ss',
'month': 'HH:mm:ss',
'quarter': 'HH:mm:ss',
'year': 'HH:mm:ss',
}
}
}]
}