Format date in tooltip content

[Widgy]

I have my X axis as a date with time and would like to show the date and time in the tooltip content when a user hovers over my line graph. I see you can customize the tooltip content using this option https://canvasjs.com/docs/charts/chart-options/data/tooltipcontent/ , but I do not see how I can format the date display the time with it as well.

[Anjali]

widgy,

You can use xValueFormatString property of dataSeries to define how x-values must be formatted before they appear on the indexLabel or toolTip. You can format numbers and date time values using this property. For example if you set xValueFormatString as xValueFormatString: "DD/MMM/YYYY HH:mm:ss" then the x-value appearing in the toolTip will be formatted as shown in the image below.

Please refer to this JSFiddle for a working example with code.

__
Anjali

[Widgy]

Thanks, that is what I was looking for. When I first looked at the docs for that property, I thought that would have changed the label as well since it says “Defines how x axis values must be formatted before they appear on the indexLabel or toolTip,” but looking at the sample on the page it doesn’t change the indexLabel. Is that right?

[Anjali]

widgy,

You can format numbers and date time values before they appear on Axis-X using its valueFormatString property. Here is an example on how you can use axisX valueFormatString property:

axisX: {
  valueFormatString: "DD/MMM/YYYY HH:mm:ss",
}

Please note that the xValueFormatString property is used for formatting x-values in indexLabel and toolTip.

I thought that would have changed the label as well since it says “Defines how x axis values must be formatted before they appear on the indexLabel or toolTip.

That was a typo and we have fixed the same. Thank you for reporting :)

__
Anjali