<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); jQuery(document).ready(function() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn('string', 'Year'); dataTable.addColumn('number', 'Sales'); dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true} }); dataTable.addColumn('number', 'Benefit'); dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true} }); dataTable.addRows([ ['2010', 1990, '<b>$1990K in our first year!</b>', 1800, '<b>$1800K in our first year!</b>'], /* support any valid html */ ['2011', 1500, '<i>$1500K in our second year!</i>', 1300, '<i>$1300K in our second year!</i>'], ['2012', 1200, '$1200K in 2012.', 1040, '$1040K in 2012.'], ['2013', 1000, '$1M in sales last year.', 910, '$910K in sales last year.'] ]); var options = {
tooltip: {isHtml: true},
chartArea: {width: "90%", left: 0, top: 0} }; // Create and draw the visualization. var ac = new google.visualization.ColumnChart(document.getElementById('visualization')); ac.draw(dataTable, options); }); </script> </head> <body> <div id='visualization'></div> </body> </html>
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content