Google Charts to set Html tooltips - Javascript Google Chart

Javascript examples for Google Chart:Tooltip

  1. HOME
  2. Javascript
  3. Google Chart
  4. Tooltip

Description

Google Charts to set Html tooltips

Demo Code

ResultView the demo in separate window 

<html>
   <head></head>
   <body> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {/*from w w w .  j  a v  a 2  s.  c o m*/
      var data = google.visualization.arrayToDataTable([
        ["District", "Score", { role: "annotation" }, { role: "tooltip", p: { html: true } } , { role: "annotationText", p: { html: true } }],
        ["District 1", 25, "12 (6 Responses)", "<b>Score 12</b><br/>(6 Responses)", "<b>Score 12</b><br/>(6 Responses)"],
        ["District 2", 5, "5 (8 Responses)", "<b>Score 5</b><br/>(8 Responses)", "<b>Score 5</b><br/>(8 Responses)"],
        ["District 3", 3, "3 (14 Responses)", "<b>Score 3</b><br/>(14 Responses)", "<b>Score 3</b><br/>(14 Responses)"],
        ["District 4", 0, "0 (3 Responses)", "<b>Score 0</b><br/>(3 Responses)", "<b>Score 0</b><br/>(3 Responses)"],
        ["District 5", 18, "18 (9 Responses)", "<b>Score 18</b><br/>(9 Responses)", "<b>Score 18</b><br/>(9 Responses)"],
      ]);
      var options = {
        title: "District Scores",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        tooltip: { isHtml: true },
        legend: { position: "none" },
      };
      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(data, options);
  }
  
      </script> 
      <div id="barchart_values" style="width: 900px; height: 300px;"></div>  
   </body>
</html>

Related Tutorials