Is it possible to re-skin a Google Chart?

Question

My designer has asked me to re-skin a Google Chart so that it looks as such:

Has anyone had experience with this, specifically with the custom labelling (Upper: $80k and etc) and the shading at the top and bottom?

Answer 1

Unfortunately Google Column Chart according to Configuration options section does not seem to support the customization of annotation position.

But you could consider Overlays approach:

An overlay is an area laid on top of a Google Chart. It's typically used to call out a particular statistic, but can be anything you want since it's just HTML and CSS.

Simple uses involve creating a CSS class and simply referring to it in your HTML; no JavaScript required.

Example

google.load('visualization', '1', { packages: ['corechart', 'bar'] });
google.setOnLoadCallback(drawChart);
var chart;

function drawChart() {
    var data = google.visualization.arrayToDataTable([
         ['Offer', 'Amount', { role: 'style' }],
         ['Client Offer', 60000, 'color: #5A9AD6'],
         ['NBCU Offer', 75000, 'color: #7330A5']
    ]);



    var options = {
        title: 'Amount',
        legend: { position: "none" },
        vAxis: {
            minValue: 0,
            maxValue: 80000,
            format: 'currency',
            ticks: [0, 10000, 20000, 30000, 40000, 50000, 60000, 70000, 80000]
        },
        bar: { groupWidth: 100 }
    };

    var view = new google.visualization.DataView(data);

    //var formatter = new google.visualization.NumberFormat({ prefix: '$' });
    //formatter.format(data, 1);
   
    //view.setColumns([0,1,2,
    //    {
    //        role: "annotation",
    //        type: "string",
    //        calc: function (dt, row) { 
    //            return dt.getFormattedValue(row, 1); 
    //              }
    //    }
    //]);

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

        #chart {
            width: 100%;
            height: 100%;
            position: relative;
        }

         .chart-container {
             position: absolute;
             width: 640px;
             height: 420px;
         }

        .chart-overlay {
            width: 400px;
            height: 260px;
            position: inherit;
            top: 80px;
            left: 120px;
        }

        .chart-segment-top {
            background: rgba(231, 231, 231, .6);
            height: 100px;
            top: 0px;
            position: relative;
        }

        .chart-segment-bottom {
            background: rgba(255, 219, 222, .6);
            top: 130px;
            bottom: 0px;
            height: 30px;
            position: relative;
        }

        .chart-annotation-client {
            top: 45px;
            left: 65px;
            position: inherit;
            font-family: serif;
            font-size: 14px;
        }

        .chart-annotation-nbcu {
            position: inherit;
            top: 0px;
            left: 265px;
             font-family: serif;
            font-size: 14px;
        }

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div class="chart-container">
   <div id="chart"></div>
   <div class="chart-overlay">
       <div class="chart-segment-top"></div>
       <div class="chart-segment-bottom"></div>
       <div class="chart-annotation-client">$60,000.00</div>
       <div class="chart-annotation-nbcu">$75,000.00</div>
   </div>
</div>