Annotations With Material Column Chart?

I have data in the form of [[X, Y, {role: 'annotation'}], [1,2, 'something'], ...,...] that I pass to var data = google.visualization.arrayToDataTable(dataPattern); and plot wit

Solution 1:

google.charts.Bar component does not support annotations role but you could utilize google.visualization.BarChart from corechart package for that purpose as demonstrated below:

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

      function drawChart() {
        var data = new google.visualization.arrayToDataTable([
          ['Opening Move', 'Percentage', { role: "style" }, { role: 'annotation' }],
          ["King's pawn (e4)", 44, "#b87333",'43%'],
          ["Queen's pawn (d4)", 31, "silver", '31%'],
          ["Knight to King 3 (Nf3)", 12, "gold", '12%'],
          ["Queen's bishop pawn (c4)", 10, "color: #e5e4e2", '10%'],
          ['Other', 3, "green", '3%']
        ]);

        var options = {
          title: 'Chess opening moves',
          width: 900,
          legend: { position: 'none' },
          chart: { title: 'Chess opening moves',
                   subtitle: 'popularity by percentage' },
          bars: 'horizontal', // Required for Material Bar Charts.
          axes: {
            x: {
              0: { side: 'top', label: 'Percentage'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

        //var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        var chart = new google.visualization.BarChart(document.getElementById("top_x_div"));
        chart.draw(data, options);
      };

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="top_x_div" style="width: 640px; height: 480px;"></div>