Formatting X axes values in tooltips

[Michael Broos]

How do I prevent Google Charts from formatting the X axis values in the tooltip?  I have a few examples where I need to do this.  The simplest is below, where I am charting line items from an annual statement.  I prevent Google from formatting the year on the x axis with hAxis: { format: '' }, but it still adds the comma when displaying those year values in the tooltip.  If I make the x axis a "string" column instead of a "number" column, I lose the hAxis gridlines because it is a discrete column, not a continuous one.

A more complicated example is quarterly financials.  As you can see in the example below, different companies define the endpoints of their "quarters" differently, depending on how their financial year is defined.  Again, I want hAxis gridlines, but I can't use the continuous value I have (period end date) because the dates vary so much.  Google puts tickmarks where it thinks they look good, without regard to the actual period end dates.  So, I synthesize a continuous quantity for the x-axis with (Year * 4) + Quarter, and provide a ticks array with the string equivalent (e.g. "Q4 2020").  Google, of course, displays that synthetic "quarter number" in the tooltip, as in the example below.  ((2021*4)+3 = 8087)

[Daniel LaLiberte]

Hi Micheal,

There are two kinds of formatting features to be aware of: formatting of tick values and formatting of data values.  It is the latter which end up in tooltips, so look into how you format your data values either by using the formatting functions, e.g. NumberFormat, or by specifying the formatted string yourself as part of the data.  You can specify the formatted value using the cell value notation, e.g. {'v': 8087, 'f': 'Q4 2020'}, or by setting the formatted value of each cell with datatable.setFormattedValue(row, column, string);

Hope that helps.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/e566317b-69ae-4b47-9f47-fad512bf0d43n%40googlegroups.com.

--

• Daniel LaLiberte  • SWE  • Cambridge MA  • dlaliberte@Google.com

[Shweta Goyal]

Hello,

I have some issues regarding tooltip.I need some extra text in tooltip like I showed in attachment.

I need above text in tooltip.

So, Please help for this.

SHWETA GOYAL Web Developer          Grow, Evolve, Connect +91 9806816293 https://chetaru.com

This email contains information from Chetaru that may be proprietary, confidential and/or privileged. The information is intended only for the use of the individual(s) or entity named above.

If you are not the intended recipient, be aware that any disclosure, copying, distribution or use of the contents of this information is prohibited. If you have received this email in error, please notify the sender immediately by replying to the address listed in the "From:" field

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJNy2Y6nNmCaf%2BZKz2fwFAKBXZNsFv4_8kCzMhh%3DHc4T4w%40mail.gmail.com.

[Ray Thomas]

Hello Shweta,

You really can put whatever you like in the datatable cell used to create the tooltip so long as it's HTML formatted for JavaScript. You can include variables,  images, links and even other charts - https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

The column given the role of tooltip can either be in wherever the data is imported from or created in the chart code. 

Ray