Currently, I am using Google Chart to display data for different countries. When hovering over these countries, a tooltip is displayed which fetches data from the backend. However, I would like to customize the background color of this tooltip as it is currently set to white by default.
Below is the code snippet:
activity_chartdata = new google.visualization.DataTable();
activity_chartdata.addColumn('string', 'Country');
activity_chartdata.addColumn('number', 'Activity');
activity_chartdata.addColumn({type: 'string', role: 'tooltip'});
activity_chart = new google.visualization.GeoChart(document.getElementById('social_activity_map_chart_div'));
var mapData = data['Payload'][0]['mapDataPoints'];
jQuery.each(mapData, function (index, value) {
activity_chartdata.addRow([{
v: value['shortCode'],
f: value['countryName']
},parseFloat(value['activityCount']), "Activity: " + reformatNumber(value['activityCount'])]);
});
var options = {
colorAxis: {colors: colorArray},
showZoomOut: "true",
//backgroundColor: '#CBD0D1',
datalessRegionColor: '#ffffff',
defaultColor: '#ffffff',
zoomOutLabel: 'Zoom Out',
keepAspectRatio: true,
height: finalHeight
};
activity_chart.draw(activity_chartdata, options);