Google Charts custom tooltip example

Google Charts custom tooltip example

by Tihomir Totev

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>

JavaScript

google.setOnLoadCallback(drawChart);
	function drawChart() {
		var data = google.visualization.arrayToDataTable([
			[	
				{id: 'date', label: 'Date', type: 'string'},
				{role: 'tooltip', p: {html: true}, type: 'string'}, //required
				{id: 'spent', label: 'Sales', type: 'number'},
				{id: 'expected', label: 'Expenses', type: 'number'}
			],
			['2013', content(1000,400,'x'), 1000,      400],
			['2014', content(1170,460,'x'), 1170,      460],
			['2015', content(660,1120,'x'), 660 ,      1120],
			['2016', content(1030,540,'x'), 1030,      540]
		]);
	 
	  
		var options = {
			title: 'Company Performance',
			hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
			vAxis: {minValue: 0},

			focusTarget: 'category', //required
			tooltip: { isHtml: true } //required
		};

		var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
		chart.draw(data, options);
	}

	function content(a,b,c){
		return '<div style="border:10px solid blue"> '+ a + ' ' + b + ' ' + c + ' </div>'
	}