Perspective XY Chart xAxes tooltip text {dateX}

Can anyone see why the date is not appearing in the Tooltip?

Reference: X-Value in XY Chart Bullet Tooltip - #5 by PGriffith

Only thing I can come up with is that it doesn’t know which data item to reference and so returns an empty string as it can’t find the key.

If you hover over a data point directly does it behave the same way?

Thanks, Irose. The Y bullet tooltips are behaving correctly.

XY chart Y tooltips

try one of the other 2 things listed in the post i guess (categoryX or valueX)

For more details about tooltip formatting tooltip.text
https://www.amcharts.com/docs/v4/concepts/formatters/formatting-strings/

From what I can tell, your formatting string is correct, the issue is that the chart isn’t finding a reference to any object which has a date value key.

From amCharts4 documentation:

Basically, when some object in the chart is trying to format a label, and its TextFormatter encounters a data placeholder, it goes like this:

  1. Can I find a value with such key in my own dataItem ? (if there’s one)
  2. Can I find a value with such key in my immediate parent’s dataItem ? (if there’s a parent and it has a data item)
  3. Can I find a value with such key among my own properties?
  4. Can I find a value with such key among my parent’s properties? What about other ancestors in the ascendancy ladder?

And if you were to change the bullet tooltip text it will actually display the date as expected.

{name}: [bold]{valueY}[/]\nDate: [bold]{dateX}[/]

NOTE: where I have the newline you have to actually hit enter, because (at least in 8.1.7) for some reason it doesn’t actually honor either the newline or html tags. This might be a bug.

Perhaps @PGriffith has some better insight into why the Axis tooltip doesn’t have a reference to {dateX}.

Thanks! I had read the documentation but wasn’t much wiser. I tried the \n for a line break but that didn’t seem to do anything.

XY chart dateX fix

Your post prompted me to add the date into the bullet tooltip rather than the X-axis labels. This works and to effect the line break you need to enter the text then edit the text via the dropdown text editor and add in a line break without the \n.

This solves the problem satisfactorily and I can delete the X-axis tooltip.

3 Likes

Just only add new line and it working \n not functionally

Further examples:

Count: [bold]{valueY}[/]
Time: [bold]{dateX.formatDate('HH:mm')}[/]
{dateX.formatDate('yyyy-MMM-dd')}
{dateX.formatDate('EEE')}

This is specified in props.series.0.line.appearance.bullets.0.tooltip.text, etc.

See the AM Charts Formatting date and time for more details.

2 Likes

An example tooltip with date, time and day of week.

XY Chart tooltip with time

Machine: [bold]{name}[/]
Count: [bold]{valueY}[/]
Date: [bold]{dateX.formatDate('yyyy-MMM-dd')}[/]
Time: [bold]{dateX.formatDate('HH:mm EEE')}[/]

For anyone wanting to format the number on a tooltip …

Tooltip cpm

Machine: [bold]{name}[/]
CPM: [bold]{valueY.formatNumber("0.0")}[/]
Date: [bold]{dateX.formatDate('yyyy-MMM-dd')}[/]
Time: [bold]{dateX.formatDate('HH:mm EEE')}[/]

More on the AM Charts website at Formatters – amCharts 4 Documentation.

2 Likes