Google Charts to increase width of tooltip - Javascript Google Chart

Javascript examples for Google Chart:Tooltip

  1. HOME
  2. Javascript
  3. Google Chart
  4. Tooltip

Description

Google Charts to increase width of tooltip

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Tooltip rotation example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <style>
div.google-visualization-tooltip { width:300px; background-color: red; }
      </style> 
      <div id="tooltip_rotated" style="width: 400px; height: 400px;"></div> 
      <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {/*  w w  w  . ja v a 2s .com*/
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Fixations'],
          ['2015',  80],
          ['2016',  90],
          ['2017',  100],
          ['2018',  90],
          ['2019',  80],
        ]);
        var options = {
          tooltip: { isHtml: true },    // CSS styling affects only HTML tooltips.
          legend: { position: 'none' },
          bar: { groupWidth: '90%' },
          colors: ['#A61D4C']
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_rotated'));
        chart.draw(data, options);
      }

      </script>  
   </body>
</html>

Related Tutorials