Draw labels inside google column charts

Question

I use https://developers.google.com/chart/interactive/docs/gallery/columnchart google column chart. hAxis keeps dates, vAxis keeps values (numbers). I have two column for each date, and isStacked is set to true. I want to display some more info inside each column, like percentage correlation. For example I have next row:

[Date('2012', '05', '05'), 100, 100]

I want to display that both columns takes 50% of total amount (200) and I want to display it inside columns

Is it possible? And is it possible to display some more info (not only percents, but also absolute values etc)

asgallant asgallant · Accepted Answer · 2013-10-22T15:47:29

You can create calculated columns to contain whatever information you want to derive from the existing columns. Here's an example that creates a tooltip for the first column that contains the value and the percent of the total that is represents:

// assumes the DataTable object is called "data"
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
    type: 'string',
    role: 'tooltip',
    calc: function (dt, row) {
        var val = dt.getValue(row, 1);
        var total = dt.getValue(row, 1) + dt.getValue(row, 2);
        var percent = (100 * val / total).toFixed(2) + '%';
        return 'Value: ' + val + ' (' + percent + ')';
    }
}, 2]);

Draw labels inside google column charts

1 Answers