Google Charts - Display Actual Number When Hover Bar

Question

I use the SHORT format my Google Column Chart. This format works great and it saves space for the bar. However, I like to show the actual number like 1180 instead of 1.2K when user hover the mouse over the bar. Currently, it shows the SHORT format number when user hovers the bar. Is that possible to show actual when hover, but keep the SHORT format for the bar display?

Thanks in advance,

Fiddle: https://jsfiddle.net/milacay/bq1srvdg/24/

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    var array = [
        ["", "Today Hrs", "Goal Hrs"],
            ["Title1", 4553, 4151],
            ["Title2", 5560, 6150],
            ["Title3", 850, 920],
            ["Title4", 10505, 12320]
    ];

    var data = new google.visualization.arrayToDataTable(array);
    var formatter = new google.visualization.NumberFormat({
            //prefix: '$',
            pattern : 'short'
        });
    formatter.format(data, 1);
    formatter.format(data, 2);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
                calc : "stringify",
                sourceColumn : 1,
                type : "string",
                role : "annotation"
            },
            2, {
                calc : mystringy.bind(undefined, 2),
                sourceColumn : 2,
                type : "string",
                role : "annotation"
            },
        ]);

    var options = {
        vAxis : {
            format : 'short',
            title : 'Progress To-Date',
            //viewWindowMode:'explicit',
            //viewWindow: {
            // max: 50,
            // min:0
            //},
            gridlines : {
                count : 8
            }
        },
        chartArea : {
            right : 0,
            width : "80%",
            height : "80%"
        },
        bar : {
            groupWidth : 70 // Set the width for each bar
        },
        annotations : { // Setting for font style format of the bar series...
            textStyle : {
                fontName : 'Times-Roman',
                fontSize : 10,
            }
        },
        width : 500,
        height : 500,
        bars : 'vertical',
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('classic_div'));
    //chart.draw(data, options);
    chart.draw(view, options);

}

function mystringy(column, data, row) {
    return ' ' + data.getFormattedValue(row, column);
}

WhiteHat WhiteHat · Accepted Answer · 2018-02-15T19:39:32

the tooltip will display the formatted value by default
so format the data table columns with the format you want on hover

then use the calc function for the annotation and a different formatter to display the short format

see following working snippet...

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    var array = [
      ["", "Today Hrs", "Goal Hrs"],
      ["Title1", 4553, 4151],
      ["Title2", 5560, 6150],
      ["Title3", 850, 920],
      ["Title4", 10505, 12320]
    ];

    var data = new google.visualization.arrayToDataTable(array);
    var formatTooltip = new google.visualization.NumberFormat({
        pattern : '#,##0'
    });
    formatTooltip.format(data, 1);
    formatTooltip.format(data, 2);
    var formatShort = new google.visualization.NumberFormat({
        pattern : 'short'
    });

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

    var options = {
        vAxis : {
            format : 'short',
            title : 'Progress To-Date',
            //viewWindowMode:'explicit',
            //viewWindow: {
            // max: 50,
            // min:0
            //},
            gridlines : {
                count : 8
            }
        },
        chartArea : {
            right : 0,
            width : "80%",
            height : "80%"
        },
        bar : {
            groupWidth : 70 // Set the width for each bar
        },
        annotations : { // Setting for font style format of the bar series...
            textStyle : {
                fontName : 'Times-Roman',
                fontSize : 10,
            }
        },
        width : 500,
        height : 500,
        bars : 'vertical',
    };

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

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

Google Charts - Display Actual Number When Hover Bar

1 Answers