Google Bar Chart grouped & stacked annotations issue

Question

I am trying to show annotations for my google Bar chart that has a grouped and stacked data. I am not able to show the annotations, although I have added annotation roles in the data columns as described in google bar charts exam Following is my Google chart script:

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


function drawStuff() {
  var data = new google.visualization.arrayToDataTable([
    ["Users", "Normal", { role: 'annotation' }, "SLA", { role: 'annotation' }, "HP", { role: 'annotation' }, "SLA", { role: 'annotation' }],
    ["John D.", 3, '3', -2, '3', 1, '3', 0, '3'],
    ["Muhammad E.", 4, '3', -2, '3', 5, '3', -3, '3'],
    ["Steve B.", 5, '3', -3, '3', 1, '3', -1, '3'],
    ["Donna P.", 5, '3', -1, '3', 6, '3', -3, '3'],
    ["Altamash A.", 7, '3', -4, '3', 6, '3', -2, '3'],
    ["Uzair T.", 3, '3', -2, '3', 0, '3', 0, '3'],
    ["Mathew R.", 6, '3', -3, '3', 6, '3', 0, '3']
  ]);

  /* ----- */

  /* ---- */

/* Options Start */
  var options = {
    bars: "vertical",
    isStacked: 'true',
    width: "90%",
    height: 500,

    annotations: {
        textStyle: {
          color: 'black',
          fontSize: 11,
        },
        alwaysOutside: true
      },

    legend: {
      position: "top",
      alignment: "start"
    },

    hAxis: {
      title: '',
      textStyle: {color: '#777777', fontSize: '20', fontName: 'Overpass', bold: true},

    },

    vAxis: {
      textStyle: {color: '#fff'},
      title: '',
      gridlines: {
        color: "#eee"
      },
      viewWindow: {
        ticks: 20,
        max: 10
      }
    },
    vAxes: {
      0: {},
      1: {
        gridlines: {
          color: "transparent"
        }
      }
    },
    series: {
      0: {
         targetAxisIndex: 0,
         color: '#4285f4'
      },
      1: {
         targetAxisIndex: 0,
        color: '#93b6f3'
      },
      2: {
         targetAxisIndex: 1,
         color: '#db4437'
      },
      3: {
        targetAxisIndex: 1,
        color: '#f19a92'
      }
    },



  };
  /* Options End */
  /* Generating Graph */
  var chart = new google.charts.Bar(document.getElementById("chart_div"));
  chart.draw(data, google.charts.Bar.convertOptions(options));
}

WhiteHat WhiteHat · Accepted Answer · 2017-06-19T11:51:50

column roles, including annotations, are not supported by Material charts

see --> Tracking Issue for Material Chart Feature Parity for the full list of unsupported options

recommend using a Core chart with the following option

theme: 'material'

see following working snippet...

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

function drawStuff() {
  var data = new google.visualization.arrayToDataTable([
    ["Users", "Normal", { role: 'annotation' }, "SLA", { role: 'annotation' }, "HP", { role: 'annotation' }, "SLA", { role: 'annotation' }],
    ["John D.", 3, '3', -2, '3', 1, '3', 0, '3'],
    ["Muhammad E.", 4, '3', -2, '3', 5, '3', -3, '3'],
    ["Steve B.", 5, '3', -3, '3', 1, '3', -1, '3'],
    ["Donna P.", 5, '3', -1, '3', 6, '3', -3, '3'],
    ["Altamash A.", 7, '3', -4, '3', 6, '3', -2, '3'],
    ["Uzair T.", 3, '3', -2, '3', 0, '3', 0, '3'],
    ["Mathew R.", 6, '3', -3, '3', 6, '3', 0, '3']
  ]);

  var options = {
    theme: 'material',
    isStacked: 'true',
    width: '90%',
    height: 500,
    annotations: {
      textStyle: {
        color: 'black',
        fontSize: 11,
      },
      alwaysOutside: true
    },
    legend: {
      position: 'top',
      alignment: 'start'
    },
    hAxis: {
      title: '',
      textStyle: {color: '#777777', fontSize: '20', fontName: 'Overpass', bold: true},
    },
    vAxis: {
      textStyle: {color: '#fff'},
      title: '',
      gridlines: {
        color: '#eee'
      },
      viewWindow: {
        ticks: 20,
        max: 10
      }
    },
    vAxes: {
      0: {},
      1: {
        gridlines: {
          color: 'transparent'
        }
      }
    },
    series: {
      0: {
         targetAxisIndex: 0,
         color: '#4285f4'
      },
      1: {
         targetAxisIndex: 0,
        color: '#93b6f3'
      },
      2: {
         targetAxisIndex: 1,
         color: '#db4437'
      },
      3: {
        targetAxisIndex: 1,
        color: '#f19a92'
      }
    }
  };

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

note: also recommend not using jsapi to load the library, use loader.js
according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.

this only changes the load statement, see above snippet...

Google Bar Chart grouped & stacked annotations issue

1 Answers