Number Format Presets Example

A demonstration of the number format presets.

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>https://jsfiddle.net/Albion87/ujpv8oep/#update

JavaScript

google.charts.load('current', {
    callback: drawStuff,
    packages:['bar']
});


function drawStuff() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Nescafe Instant');
    data.addColumn('number', 'Folgers Instant');
    data.addColumn('number', 'Nescafe Beans');
    data.addColumn('number', 'Folgers Beans');
    data.addRows([
        ['2001', {v: 20, f: '22dfgdf%'}, {v: 25, f: '6aasdf2%'}, {v: 42, f: '82%'}, {v: 52, f: '2%'}],
        ['2002', {v: 20, f: '22asfsa%'}, {v: 80, f: '62%'}, {v: 80, f: '82%'}, {v: 20, f: '2%'}],
        ['2003', {v: 50, f: '24asdf%'}, {v: 50, f: '52%'}, {v: 46, f: '82%'}, {v: 54, f: '2%'}],
        ['2004', {v: 20, f: '23%'}, {v: 80, f: '42%'}, {v: 89, f: '82%'}, {v: 11, f: '2%'}]
    ]);

    // Set chart options
    var options = {
        isStacked: true,
		tooltip: { textStyle: { fontName: 'verdana', fontSize: 1 } },		
        width: 800,
        height: 600,
        chart: {
            title: 'Year-by-year coffee consumption',
            subtitle: 'This data is not real'
        },		
        vAxis: {
            viewWindow: {
                min: 0,
                max: 100
            }
        },
		legend: { position: 'left', alignment: 'start' },
        series: {
            2: {
                targetAxisIndex: 1
            },
            3: {
                targetAxisIndex: 1
            }
        },
        backgroundColor: {fill: 'transparent'},
        chartArea: {
          backgroundColor: 'transparent'
        }
    };


    // Instantiate and draw our chart, passing in some options.
    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
};