Custom tooltip is not working (Google Charts)

Question

I am currently working on google charts and trying to implement custom tooltip. It is still showing the basic default tooltip.

Documentation - https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

Link to the JSFiddle - https://jsfiddle.net/ritesh2627/wo6kb14e/1/

Here is the code: `

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawVisualization);
function createCustomHTMLContent() {
  return '<div>' +
        'Jan 2023: <strong>1234 kWh</strong>'+
      '</div>';
}
      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'sdfgadfg');
         data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
  
  data.addColumn('number', '2023');
  data.addColumn('number', '2024');
         data.addRows([
          ['Jan', createCustomHTMLContent(), 165,           614.6],
          ['Feb' ,createCustomHTMLContent(),  135,           682],
          ['Mar' ,createCustomHTMLContent(),  157,           623],
          ['Apr' ,createCustomHTMLContent(),  139,           609.4],
          ['May' ,createCustomHTMLContent(),  136,          569.6],
          ['Jun' ,createCustomHTMLContent(),  165,           614.6],
          ['Aug' ,createCustomHTMLContent(),  135,           682],
          ['Sep' ,createCustomHTMLContent(),  157,           623],
          ['Oct' ,createCustomHTMLContent(),  139,           609.4],
          ['Nov' ,createCustomHTMLContent(),  136,          569.6],
          ['Dec' ,createCustomHTMLContent(),  136,          569.6],
        ]);
        
        var options = {
          vAxis: {title: 'Usage in kWh',titleTextStyle : {
                            fontName : "Oswald",
                            italic : false,
                        },},
          hAxis: {title: 'Month', titleTextStyle : {
                            fontName : "Oswald",
                            italic : false,
                        }},
          seriesType: 'bars',
          series: {0: { color: '#1f6099' },
          1: {type: 'line',pointsVisible: true, color: '#2AB673'}},
          legend: { position: 'bottom', alignment: 'center' },
          tooltip: { isHtml: true },
        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>
   

`

Answer 1

The tooltip column needs to come after the column you intend to modify the tooltip for. It modifies the tooltip of the previous column, so moving the tooltip column to the end like this:

data.addColumn('string', 'sdfgadfg');
data.addColumn('number', '2023');
data.addColumn('number', '2024');
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

data.addRows([
['Jan',  165,           614.6, createCustomHTMLContent()]
...]);

Provides a tooltip for the line graph at the data point 614.6 for Jan. You would need to add another column for the bar graph tooltip in between the 2023 and 2024 columns.

https://developers.google.com/chart/interactive/docs/roles