Adding Tool Tips To Waterfall Google Chart - google-visualization

Question

I'm using Google chart to create a WaterFall chart and trying to show a tool tip (not the default). It works find in column graphs.
I'm trying to avoid using createCustomHTMLContent. Any way do this without creating custom HTML content?
var data = google.visualization.arrayToDataTable([
['Sales 1', 0, 0, 38000, 38000, 'Tool Tip 1'],
['Sales 2', 38000, 38000, 55000, 55000, 'Tool Tip 2'],
['Sales 3', 55000, 55000, 77000, 77000, 'Tool Tip 3'],
['Exp 1', 77000, 77000, 66000, 66000, 'Tool Tip 4'],
['Exp 2', 66000, 66000, 22000, 22000, 'Tool Tip 5'],
['Profit', 0, 0, 22000, 22000, 'Tool Tip 6']
], true);
var options = {
legend: 'none',
bar: { groupWidth: '100%' },
title: title,
candlestick: {
fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green
}};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);

Answer 1

The tooltip column needs to be defined as such.
{type: 'string', role: 'tooltip'}
It cannot be defined from arrayToDataTable.
Here, the columns are defined in a new DataTable, and the rows added afterwards.
google.charts.load('current', {
callback: drawVisualization,
packages: ['corechart']
});
function drawVisualization() {
var dataRows = [
['Sales 1', 0, 0, 38000, 38000, 'Tool Tip 1'],
['Sales 2', 38000, 38000, 55000, 55000, 'Tool Tip 2'],
['Sales 3', 55000, 55000, 77000, 77000, 'Tool Tip 3'],
['Exp 1', 77000, 77000, 66000, 66000, 'Tool Tip 4'],
['Exp 2', 66000, 66000, 22000, 22000, 'Tool Tip 5'],
['Profit', 0, 0, 22000, 22000, 'Tool Tip 6']
];
var data = new google.visualization.DataTable({
cols: [
{id: 'Category', type: 'string'},
{id: 'Min', type: 'number'},
{id: 'Initial', type: 'number'},
{id: 'Final', type: 'number'},
{id: 'Max', type: 'number'},
{id: 'Tooltip', type: 'string', role: 'tooltip'}
]
});
data.addRows(dataRows);
var options = {
legend: 'none',
bar: { groupWidth: '100%' },
title: 'title',
candlestick: {
fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green
}};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>