Tooltip rotation example

An example of a rotated tooltip.

by Geo George

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <!-- The next line rotates HTML tooltips by 30 degrees clockwise. -->
  
    <div id="tooltip_rotated" style="width: 400px; height: 400px;"></div>

CSS

.custom-tooltip{
  padding:5px;
}

JavaScript

google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Fixations',{'role': 'tooltip', 'p': {'html': true}},"s"],
          ['2015',  80,"<div class='custom-tooltip'><h2>2015</h2><span>Fixations:<strong>80</strong></span></div>",45],
          ['2016',  90,"hhh",56],
          ['2017',  100,"hhhh",87],
          ['2018',  90,"hhfdf",53],
          ['2019',  80,"jjjj",33],
        ]);

        var options = {
          tooltip: { isHtml: true }
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_rotated'));

        chart.draw(data, options);
      }