CODEWITHSUNDEEP
buttonannotationsgoogle-visualizationsize
Alqio
Alqio

Reputation: 472

Google Annotation Chart zoom button sizes

I have a Google Annotation Chart and I can't figure out how to change the zoom button sizes at the top. They are very small and the font is not ideal either. You can see the buttons that I mean here: Chart buttons

How can I change their style? Also is there a way to add horizontal lines to the background, the chart currently only has vertical lines.

Upvotes: 1

Views: 741

Answers (1)

Shogg
Shogg

Reputation: 841

Just select it and make big

google.visualization.events.addListener(chart, 'ready', onReady);

chart.draw(data, options);

function onReady() {
   var x = document.getElementById('chart_div_AnnotationChart_zoomControlContainer').getElementsByTagName('button');
   document.getElementById('chart_div_AnnotationChart_zoomControlContainer').style.fontSize = '14px';

   for (var i = 0; i < x.length; i++) {
       x[i].style.height = '40px';
       x[i].style.width = '40px';
       x[i].style.fontSize = '14px';
   }
}

On Google example annotation chart (updated): https://jsfiddle.net/damiantt/upqxj1wb/2/

Upvotes: 2

Related Questions