CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
peXeq
peXeq

Reputation: 177

Google chart label

I have the column for the Annotation, but the annotation does not appear at the top of the bars? If the var view important to show the Label?

google.load('visualization', '1.1', {'packages': ['bar']});
google.setOnLoadCallback(drawStuff);

function drawStuff() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Nescafe Instant');
    data.addColumn({type: 'number', role: 'annotation'});
    data.addColumn('number', 'Folgers Instant');
    data.addColumn({type: 'number', role: 'annotation'})    
    data.addColumn('number', 'Nescafe Beans');
    data.addColumn({type: 'number', role: 'annotation'})    
    data.addRows([
        ['2001', 321, 150, 621, 500, 600, 816],
        ['2002', 163, 150, 231, 500, 600, 539] 
    ]);

    var options = {
        width: 800,
        height: 600,
        chart: {
            title: 'Year-by-year coffee consumption',
            subtitle: 'This data is not real'
        },
        vAxis: {
            viewWindow: {
                min: 0,
                max: 1500
            }
        },
        chartArea: { backgroundColor: '#F8F8F8' }
    };

    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
};

Thanks, peXeq

Upvotes: 1

Views: 87

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

first, the documentation for the annotation role says to use --> Data type: string

and unfortunately, annotations don't work on Material charts
as demonstrated below

use config option theme: 'material' to get the Core chart close to the look of a Material chart

see following working snippet, draws both chart types... 

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Nescafe Instant');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addColumn('number', 'Folgers Instant');
    data.addColumn({type: 'string', role: 'annotation'})
    data.addColumn('number', 'Nescafe Beans');
    data.addColumn({type: 'string', role: 'annotation'})
    data.addRows([
      ['2001', 321, '321', 621, '621', 600, '600'],
      ['2002', 163, '163', 231, '231', 600, '600']
    ]);

    var options = {
      width: 800,
      height: 600,
      chart: {
        title: 'Year-by-year coffee consumption',
        subtitle: 'This data is not real'
      },
      vAxis: {
        viewWindow: {
          min: 0,
          max: 1500
        }
      },
      chartArea: { backgroundColor: '#F8F8F8' },
      title: 'Year-by-year coffee consumption',
      theme: 'material'
    };

    var chart = new google.charts.Bar(document.getElementById('chart_div_material'));
    chart.draw(data, google.charts.Bar.convertOptions(options));

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div_core'));
    chart.draw(data, options);
  },
  packages: ['bar', 'corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>Core Chart</div>
<div id="chart_div_core"></div>
<div>Material Chart</div>
<div id="chart_div_material"></div>

Upvotes: 1

Related Questions