How to customize content inside Tooltip in Google Chart

问题

I have the following data model for the above chart.

var data = google.visualization.arrayToDataTable([
        ["", "Goal Achieved", {role: 'style'}, target_goal_annotation, {role: 'style'}, {role: 'annotation'}],
        [1, achieved_goal, "opacity: .75;", target_goal, "opacity: 0;", "" ]
    ]);

When I hover over the progress bar the first line is always 1 because I have 1 in the first place in above data block.

If I put anything else, the baseline disappears, which is understandable. I need to replace the 1 in the tooltip and put something else e.g. Points collected.

How would I achieve this with the baseline visible?

By baseline, I mean the horizontal at the bottom.

回答1:

by default, the tooltip will use the formatted value of the data table cell.

using object notation, we can provide both the value (v:) and the formatted value (f:)

so, to display something other than 1, use something like the following...

{v: 1, f: 'Points collected'}

e.g.

var data = google.visualization.arrayToDataTable([
    ["", "Goal Achieved", {role: 'style'}, target_goal_annotation, {role: 'style'}, {role: 'annotation'}],
    [{v: 1, f: 'Points collected'}, achieved_goal, "opacity: .75;", target_goal, "opacity: 0;", "" ]
]);

来源：https://stackoverflow.com/questions/58692828/how-to-customize-content-inside-tooltip-in-google-chart