JSFiddle - React, Tailwind, and code Playground

google line chart with custum tooltip interactivity

by Karmik Patel

HTML

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Genre', 'Percentage of my books','NCV'],
          ['Science Fiction', 217,200],
          ['General Science', 203,210],
          ['Computer Science', 175,185],
          ['History', 155,160],
          ['Economics & Political Science', 98,105],
          ['General Fiction', 72,90],
          ['Fantasy', 51,59],
          ['Law', 29,35]
        ]);

        var chart = new google.visualization.LineChart(
          document.getElementById('tooltip_action_2'));

        var options = { tooltip: { trigger: 'selection' }};

        chart.setAction({
          id: 'increase',
          text: 'Read 20 more books',
          action: function() {
            data.setCell(chart.getSelection()[0].row, chart.getSelection()[0].column,
                         data.getValue(chart.getSelection()[0].row, chart.getSelection()[0].column) + 20);
            chart.draw(data, options);
          }
        });

        chart.setAction({
          id: 'decrease',
          text: 'Read 20 fewer books',
          action: function() {
            data.setCell(chart.getSelection()[0].row, chart.getSelection()[0].column,
                         data.getValue(chart.getSelection()[0].row, chart.getSelection()[0].column) - 20);
            chart.draw(data, options);
          }
        });

        chart.draw(data, options);
      }
    </script>
  </head>
<body>
<div id="tooltip_action_2" style="width:1000px;height:500px;"></div>

</body>
</html>