Skip to content Skip to sidebar Skip to footer

How To Put Labels Over The Bars Google.charts.bar()

I need to put labels over my google.chart.Bar (not google.visualization.BarChart) the chart is correctly visualized but only shows values on mouse over the bars,please helpme!. wit

Solution 1:

unfortunately, annotations (bar labels) are not supported on Material charts

recommend using Core chart, with the following option instead...

theme:'material'

an separate annotation column should be added for each series column, that should have annotations

when using a DataView to add annotation columns, be sure to draw the chart using the view (view3), instead of the original data table (data3)

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data3 = new google.visualization.arrayToDataTable([
      ['Ambitos', 'Programados', 'Terminados',{ role: 'style' }],
      ['ex', 8,(8)-(6),''],
      ['ma', 6,(6)-(4),''],
      ['mo', 4,(4)-(2),''],
      ['re', 2,(2)-(1),''],
      ['tx', 1,(1)-(0),'']]);

    var view3 = new google.visualization.DataView(data3);
    view3.setColumns([0,
      1,
      {
        calc: "stringify",
        sourceColumn: 1,
        type: "string",
        role: "annotation"
      },
      2,
      {
        calc: "stringify",
        sourceColumn: 2,
        type: "string",
        role: "annotation"
      },
      3
    ]);

    var options3 = {
      legend: { position: "none" },
      chart: {
        title: 'Resumen General',
        subtitle: 'programados v/s terminados'
      },
      series: {},
      axes: {
        y: {
          distance: {label: ''},
        }
      },
      chartArea : {
        width:"95%",
        height:"80%"
      },
      theme: 'material'
    };

    var chart3 = new google.visualization.ColumnChart(document.getElementById('barras'));
    chart3.draw(view3, options3);
  },
  packages:['corechart']
});
<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="barras"></div>

note: list of options unavailable to Material --> Tracking Issue for Material Chart Feature Parity

Post a Comment for "How To Put Labels Over The Bars Google.charts.bar()"