Customizing Tooltip Text In Pie Chart

Question

I'm working on a pie chart and I would like to customize the tooltip that appears when the mouse hovers over the pie chart. Currently the text shows 50 (50%) where I really want it to say $50 (50%). It's not clear in the google charts API how to achieve this. How do I do this? Currently my JS code looks like this...

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Effort', 'Amount given'],
      ['first half',     50],
      ['second half',     50]
    ]);

    var options = {
      pieHole: 0.5,
      pieSliceTextStyle: {
        color: 'black',
      },
      legend: 'none'
    };

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

JSFiddle

score 3 · Accepted Answer · answered Feb 19 '16 at 20:38

Here's an example of how to specify tooltips with the Google charts API.

Here's some relevant documentation.

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  data = new google.visualization.DataTable();
  data.addColumn('string', 'Effort');
  data.addColumn('number', 'Amount given');
  data.addColumn({type: 'string', role: 'tooltip'});
  data.addRows([
    ['first half', 50, "$50 (50%)"],
    ['second half', 50, "$50 (50%)"]
  ]);

  var options = {
    pieHole: 0.5,
    pieSliceTextStyle: {
      color: 'black',
    },
    legend: 'none'
  };

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donut_single" style="width: 900px; height: 500px;"></div>

Customizing Tooltip Text In Pie Chart

1 Answers1