PieChart: how to properly fix unreadable tooltip? - html

Question

I'm using Google Charts API v44 and I found something that looks like a bug. At the legend, when name of the entry is too long you can see a tooltip with this name. But in Firefox under Fedora it gets unreadable because the font color and background color are the same:
I decided to use CSS for that, like this: .goog-tooltip { color: white; } and it did the trick, but later I found out that now it got broken on my Mac:
I tried .goog-tooltip { color: white; background-color: black; } but it changes background not of the tooltip itself but his borders.
How to customize font/background colors to make tooltips readable everywhere?
If you need a source code: HTML, JS, CSS

Answer 1

There are a couple options, see following example charts...
chart 0
You can use the tooltip.textStyle configuration option
However, this only lets you style the text with the following options, no background...
color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean>
chart 1
you can provide your own HTML/CSS by providing a tooltip column in the data
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
and setting tooltip.isHtml: true in the options
For more info, see Customizing HTML content...
Examples...
google.charts.load('current', {
callback: function () {
// data table
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
// chart 0
new google.visualization.PieChart(document.getElementById('piechart0')).draw(data, {
title: 'chart 0',
tooltip: {
textStyle: {
color: 'deeppink',
fontName: 'Verdana',
fontSize: 16,
bold: true,
italic: true
}
}
});
// build tooltip column
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
for (var i = 0; i < data.getNumberOfRows(); i++) {
data.setValue(i, 2,
'<div class="goog-tooltip"><div class="goog-tooltip-task">' +
data.getValue(i, 0) + '</div><div class="goog-tooltip-value">' +
data.getValue(i, 1) + '</div></div>'
);
}
// chart 1
new google.visualization.PieChart(document.getElementById('piechart1')).draw(data, {
title: 'chart 1',
tooltip: {
isHtml: true
}
});
},
packages: ['corechart']
});
.goog-tooltip {
background-color: black;
padding: 6px 6px 6px 6px;
}
.goog-tooltip-task {
color: cyan;
font-size: 20px;
font-weight: normal;
}
.goog-tooltip-value {
color: gold;
font-size: 16px;
font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart0"></div>
<div id="piechart1"></div>