Robert Nicholas
Reputation: 65
Formatting custom HTML tooltip box for Google sankey charts
I am using custom HTML tooltips in Google sankey charts but the tooltip text box appears very elongated and doesn't recognise HTML tags in the tooltip text. Does anyone know how to fix this?
google.load("visualization", "1.1", {
packages: ["sankey"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
var formatter = new google.visualization.NumberFormat({pattern:'$###.## bn'});
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Revenues');
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
['Fred', 'Ann', 107.91,],
['Bill', 'Ann', 47.86],
['Carol', 'Ann', 817.9],
['Jim', 'Kevin', 400],
['Ann', 'Kevin', 973.67],
['Sally', 'Kevin', 146.47],
['Kevin', 'EVP Sales', 1520.14]
].map(function(d) {
d.push(formatter.formatValue(d[2])+ ' This is an HTML tooltip<br>It needs to be formatted nicely<br>in a rectangular box that is not <i>long and thin</i>');
return d;
}));;
var options = {
width: 500,
height: 300,
tooltip: {isHtml: true},
formatNumber: '$### m',
sankey: {
iterations: 64,
node: {
pattern: '$### m',
nodePadding: 30,
interactivity: true,
label: {
fontName: 'Times-Roman',
fontSize: 14,
color: '#871b47',
bold: false,
italic: true
}
},
link: {
pattern: '$###.## bn'
},
allowHtml: 'true',
tooltip: {
isHtml: 'true'
}
}
};
var formatter = new google.visualization.NumberFormat({
prefix: '$',
pattern: '$###.## m'
});
formatter.format(data, 2);
var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple', 'HTML_tooltip'));
chart.draw(data, options);
}
<body>
<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>
<div id="HTML_tooltip" style="position: relative;
left: 30px;" ></div>
</body>
JSFiddle example here: http://jsfiddle.net/t9e3dcy3/5/
Upvotes: 2
Views: 1890
