Adding the £ symbol to the tooltip

Skip to first unread message

Dean Williams

Jun 15, 2021, 4:52:50 PMJun 15
to Google Visualization API
I have tried and failed
<TD colspan=2>
      <script type="text/javascript" src=""></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart'], 'language': 'en-gb'});

      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
          <?php include("Data_06_15_6.php"); ?>
  var formatter = new google.visualization.NumberFormat({
    prefix: '£',
    negativeParens: true
        var options = {
          title : 'Totals by Paddock for <?php echo $farm_name; ?>',
          fontName: 'tahoma',
          fontSize: '16',
          format: "currency",
          vAxis: {title: '', format: '£#,##0.00;(£#,##0.00)', prefix:"£", fontSize: '24'},
          hAxis: {format: 'currency', prefix:"£", fontSize: '24'},
          seriesType: 'bars',
          //series: {5: {type: 'line'}}

        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    <div id="chart_div"></div>

Dean Williams

Jun 15, 2021, 4:55:39 PMJun 15
to Google Visualization API

Dean Williams

Jun 15, 2021, 4:58:19 PMJun 15
to Google Visualization API
How do I format the value to be a currency £
so it reads Fertilizer £14,325.60 

Ray Thomas

Aug 8, 2021, 4:54:03 AMAug 8
to Google Visualization API
How this works is going to depend on what your data looks like when you import it. Is it a simple value or has it already been formatted in some way?

Google Charts data tables, like most spreadsheets, can hold two values, the actual underlying value and the formatted value. The dataTable has several methods or reading and writing these values see get and set in the documentation at

The easiest method I found is to simply loop through the data and change the formatting. The data I used as an example comes from the spreadsheet at and that's formatted as a number to two decimal places with the thousands comma.

The important part of the code is to loop through the cells of the data table, in my example table2, and reformat the formatting:

var totalRows = table2.getNumberOfRows(); 
var totalCols = table2.getNumberOfColumns();

for (i = 0; i < totalRows; i++) { 
   // No need to do Column 0 as that's the row label not data
   for (j = 1; j < totalCols; j++) {
      var thisValue = table2.getFormattedValue(i, j);
  thisValue = "£" + thisValue;
  table2.setFormattedValue(i, j, thisValue);

I wrote a page to demonstrate it working at

There is another way of doing this and that's by completely rewriting the tooltips - but that's going to be a lot more work. In my simple example there are seven columns of data, using this tooltips method, another seven would have to written.
Reply all
Reply to author
0 new messages