How to change properties of tooltip text? - charts

Question

I am new to google charts, trying to make calendar chart.
I am using this :
`google.charts.load('current', {'packages':['calendar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('date' , 'date');
dataTable.addColumn('number', 'num');
dataTable.addColumn({ type: 'string', role:'tooltip'});
dataTable.addRows([
[ new Date(2017, 11, 20), 150,'Hello'],
[ new Date(2017, 11, 21), 130,'Hello']
]);
var chart = new google.visualization.Calendar(document.getElementById('tooltip_action'));
var options = {
title: "Calendar Chart",
colors: ['#e0440e'],
height: 350
};
chart.draw(dataTable, options);
`
It is working fine. But when I move cursor to 20/12/2017 and 21/12/2017 it is showing 'Hello' in very small text and small size.
And when I move cursor to other dates it is showing in bigger.
I want to change height and width of this text.
How to change properties of this tooltip text ???

Answer 1

you can use html tooltips, then use a css class to style them
set the following option...
tooltip: {
isHtml: true
}
and column property --> p: {html: true}
dataTable.addColumn({ type: 'string', role:'tooltip', p: {html: true}});
see following working snippet...
google.charts.load('current', {
packages: ['calendar']
}).then(function () {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('date' , 'date');
dataTable.addColumn('number', 'num');
dataTable.addColumn({ type: 'string', role:'tooltip', p: {html: true}});
dataTable.addRows([
[ new Date(2017, 11, 20), 150,'<div class="tooltip">Hello</div>'],
[ new Date(2017, 11, 21), 130,'<div class="tooltip">Hello</div>']
]);
var chart = new google.visualization.Calendar(document.getElementById('tooltip_action'));
var options = {
title: "Calendar Chart",
colors: ['#e0440e'],
height: 350,
tooltip: {
isHtml: true
}
};
chart.draw(dataTable, options);
});
body {
overflow: auto;
}
#tooltip_action {
width: 1000px;
}
.tooltip {
font-size: 24px;
padding: 12px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="tooltip_action"></div>