Google charts show unformatted value in tooltip

Question

I have a formatted label displayed on the bars on my chart. This value also gets formatted in the tooltip. Is there a way to show the unformatted, raw value on the tooltip, while keeping it formatted on the label?

https://jsfiddle.net/67u052kL/1/

    var formatter = new google.visualization.NumberFormat({
        pattern: 'short'
    });
    
    formatter.format(data, 1);
    formatter.format(data, 3);

Answer 1

only format the annotation value.

to accomplish, use a custom function for the annotation role, instead of the 'stringify' function.
and you can use the formatter's formatValue method, to format a single value.

view.setColumns([0, 1, {
    calc: function (dt, row) {
        return formatter.formatValue(dt.getValue(row, 1));
    },
    type: 'string',
    role: 'annotation'
}, 2, 3, {
    calc: function (dt, row) {
        return formatter.formatValue(dt.getValue(row, 3));
    },
    type: 'string',
    role: 'annotation'
}]);

see following working snippet...

google.charts.load('50', {
  packages: ['corechart']
}).then(function () {
    var data = google.visualization.arrayToDataTable([
        ['Team'   , 'Actual',  { role: 'style'}, 'Target'],
        ['Alpha'  ,    35976,  'color: #F6931D',    90000],
        ['Beta'   ,    40542,  'color: #FDCB2F',   104167],
        ['Gamma'  ,   111227,  'color: #8AC659',   205000],
        ['Delta'  ,   238356,  'color: #32A242',   205000],
        ['Epsilon',   170555,  'color: #3A81C2',   354167]
    ]);

    var formatter = new google.visualization.NumberFormat({
        pattern: 'short'
    });

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
        calc: function (dt, row) {
            return formatter.formatValue(dt.getValue(row, 1));
        },
        type: 'string',
        role: 'annotation'
    }, 2, 3, {
        calc: function (dt, row) {
            return formatter.formatValue(dt.getValue(row, 3));
        },
        type: 'string',
        role: 'annotation'
    }]);

    var options = {
        title: {position: 'none'},
        orientation: 'vertical',
        animation: {duration : 600, startup: 'true', easing:'out'},
        annotations: {highContrast: 'true'},
        legend: {position: 'none'},
        // theme: 'material',
        chartArea:{top:5, right: 25, width: '70%', height: '90%'},
        hAxis: {format:'short'},
        // vAxis: {textPosition:'in'},
        // bar: {groupWidth: '90%'},
        seriesType: 'bars',
        series: {
            1: {type: 'bars', color: 'lightgray'}
        }
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chartContentPane'));
    chart.draw(view, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chartContentPane"></div>