Google Charts - Getting default content mixed in with custom HTML for tooltip

Question

Trying to add some custom HTML tooltips to a Googlechart.

I have followed the docs as far as I can see, but I get my custom content in the centre of the original content (rather than it overriding the original content as expected).

Is there any way to customise the tooltips html with the original values, or completely override the tooltip content?

JSFiddle here

  [1]: 

 google.charts.load('current', {'packages':['corechart', 'bar']}); google.charts.setOnLoadCallback(drawBarChart); function drawBarChart() { var bardata = google.visualization.arrayToDataTable([ ['Genre', 'Accepted', 'Pending' , {'type': 'string', 'role': 'tooltip', 'p': {'html': true}}], ['Egg Baskets', 4325, 4324 , createCustomHTMLContent(234 , 434)], ['Cheese Wedges', 43, 434, createCustomHTMLContent(234 , 434)], ['Bannanasanan', 43, 434, createCustomHTMLContent(234 , 434)]]); var view = new google.visualization.DataView(bardata); var options = { pieHole: 0.4, series: [ {color: '#b3d657', visibleInLegend: false}, {color: '#c1c2c3', visibleInLegend: false} ], legend: { position: 'bottom', alignment: 'left' }, chartArea: { left: 16, top: 10, width: '95%', height: '80%', }, isStacked: true, bar: { groupWidth: '60%' }, focusTarget: 'category', tooltip: {isHtml: true}, }; var barChart = new google.visualization.ColumnChart(document.getElementById("container-div")); barChart.draw(view, options); } function createCustomHTMLContent(accepted, pending) { return '<div class="chart-tooltip-header container">' + + '<div class="row">' + '<div class="col-12">' +'Custom Title' + '</div>' + '</div>' + '<div class="row">' + '<div class="col-6">' + 'Suggested' + '</div>' + '<div class="col-6 pull-right">' + pending + '</div>' + '</div>' + '<div class="row">' + '<div class="col-6">' + 'Accepted' + '</div>' + '<div class="col-6 pull-right">' + accepted + '</div>' + '</div>' + '</div>' }

 <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="container-div" style="width: 400px; height: 400px;"></div>

Answer 1

the following option is causing the default and custom tooltips to be mixed together.

focusTarget: 'category'

removing the above option will allow the custom tooltip to be the only one displayed.

but in order to show the same custom tooltip for both series,
you will need to include two custom tooltip columns in the data table.

see following working snippet...

 google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawBarChart); function drawBarChart() { var bardata = google.visualization.arrayToDataTable([ ['Genre', 'Accepted', {'type': 'string', 'role': 'tooltip', 'p': {'html': true}}, 'Pending', {'type': 'string', 'role': 'tooltip', 'p': {'html': true}}], ['Egg Baskets', 4325, createCustomHTMLContent(234, 434), 4324, createCustomHTMLContent(234, 434)], ['Cheese Wedges', 43, createCustomHTMLContent(234, 434), 434, createCustomHTMLContent(234, 434)], ['Bannanasanan', 43, createCustomHTMLContent(234, 434), 434, createCustomHTMLContent(234, 434)] ]); var view = new google.visualization.DataView(bardata); var options = { series: [ {color: '#b3d657', visibleInLegend: false}, {color: '#c1c2c3', visibleInLegend: false} ], legend: { position: 'bottom', alignment: 'left' }, chartArea: { left: 16, top: 10, width: '95%', height: '80%', }, isStacked: true, bar: { groupWidth: '60%' }, tooltip: {isHtml: true}, }; var barChart = new google.visualization.ColumnChart(document.getElementById("container-div")); barChart.draw(view, options); } function createCustomHTMLContent(accepted, pending) { return '<div class="chart-tooltip-header container">' + + '<div class="row">' + '<div class="col-12">' +'Custom Title' + '</div>' + '</div>' + '<div class="row">' + '<div class="col-6">' + 'Suggested' + '</div>' + '<div class="col-6 pull-right">' + pending + '</div>' + '</div>' + '<div class="row">' + '<div class="col-6">' + 'Accepted' + '</div>' + '<div class="col-6 pull-right">' + accepted + '</div>' + '</div>' + '</div>' }

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="container-div"></div>