1

I have been playing with google chart. I have a column stacked bar. I want annotation to center into the column. This is my code. Try as I might, I cannot figure it out. I found a block of code that was described as a hack, but it would have to be customized for each chart. I use this code to generates lots and lots of charts. Any help would be wildy appreciated!

<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
          </script>
          <script type = "text/javascript">
             google.charts.load('current', {packages: ['corechart']});     
          </script>


          <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
          </div>
          <script language = "JavaScript">
             function drawChart() {
                var data = google.visualization.arrayToDataTable([
            ['Genre', 'Fantasy & Sci Fi', { role: 'annotation' }, 'Romance', { role: 'annotation' }, 'Mystery/Crime', { role: 'annotation' }, 'General', { role: 'annotation' },
             'Western', { role: 'annotation' }, 'Literature', { role: 'annotation' } ],
            ['2010', 10, 'a' , 24, 'a', 20, 'a', 32, 'a', 18, 'a', 5, 'a', ],
            ['2020', 16,  'a', 22, 'a', 23, 'a', 30, 'a', 16, 'a', 9, 'a', ],
            ['2030', 28, 'a', 19, 'a', 29, 'a', 30, 'a', 12, 'a', 13, 'a', ]
          ]);



                var options = {
                                title: "h",
                                width: 600,

                                legend: { position: "none" },
                                isStacked:true
                            };

                var chart = new google.visualization.BarChart(document.getElementById('container'));
                chart.draw(data, options);
          google.visualization.events.addListener(chart, 'select', selectHandler);
          function selectHandler(e) {
              var selection = chart.getSelection();
              if (selection.length == true && selection[0].row != null) {
              console.log(selection[0])
                 //alert('You selected ' +data.getValue(selection[0].row, selection[0].column));
                 //window.open(data.getValue(selection[0].row, 0));
                  window.open('https://www.google.com/search?q='+data.getValue(selection[0].row, selection[0].column));
               } 
            }
             }
             google.charts.setOnLoadCallback(drawChart);
          </script>
Rhea Lorraine
  • 67
  • 1
  • 7
  • there are no options available for changing the position of the annotation, but you can move them manually, on the chart's `'ready'` event. [here is an example](https://stackoverflow.com/a/53008958/5090771) -- note: chart events should be assigned before the chart is drawn... – WhiteHat Oct 15 '19 at 12:04

0 Answers0