Google charts Comma separated while using angular directive

I am using Google-chart angular directive

These are my options:

$scope.test.options = {
    title: '',
    isStacked:true,
    crosshair: { trigger: 'both' },
    lineWidth: 1,
    height: 300,
    tooltip: {isHtml: true},
    animation:{
        duration: 1000,
        easing: 'out'
    },
    vAxis: { 
        title:"Revenue"
    },
    series: {
        0:{color:'#A4FF4D'},
        1:{color:'#99742E'},
        2:{color:'#FF4D5A'},
        3:{color:'#519bff'},
        4:{color:'#4DFFEA'}
    }
};

The tooltips are not formatted

I want the number in tooltip be formatted.

I tried adding formatters in options, but its not working:

    formatters: {
        NumberFormat:{
            groupingSymbol:','    
        }
    },

Thanks for the answer

Solution

You have to define your formatters for each column you want to be formatted:

var formatters = {
    number: [{
      columnNum: 1,
      groupingSymbol: ',',
      decimalSymbol: '.'
    },{
      columnNum: 2,
      pattern: "$ #,##0.00"
    },{
      columnNum: 3,
      pattern: "#,###%"
    }]
};

Pay attention to the syntax required by angular-google-chart directive: as stated in the documentation you have to use the shortened names to refer the Google Chart Formatters (i.e. number instead of NumberFormat).

Here is a complete example with 3 different number formatters:

var app = angular.module('myApp', ['googlechart']);

app.controller('MainCtrl', function($scope) {

  $scope.test = {
    type: 'AreaChart'
  };
  var data = [
    ['Country', '2013', '2014', 'delta'],
    ['Germany', 25552, 23000, 0],
    ['United States', 34434, 11000, 0],
    ['Brazil', 33342, 90001, 0],
    ['Canada', 52227, 30020, 0],
    ['France', 6444, 29000, 0],
    ['Italy', 75552, 33000, 0]
  ];
  var formatters = {
    number: [{
      columnNum: 1,
       groupingSymbol: ',',
      decimalSymbol: '.'
    },{
      columnNum: 2,
      pattern: "$ #,##0.00"
    },{
      columnNum: 3,
      pattern: "#,###%"
    }]
  };
  $scope.test.formatters = formatters;
  $scope.test.options = {
    title: '',
    isStacked: true,
    crosshair: {
      trigger: 'both'
    },
    lineWidth: 1,
    height: 300,

    animation: {
      duration: 1000,
      easing: 'out'
    },
    vAxes: {0: {title: 'Revenues', format: '#,### $'}, 1: {title: 'Percent', format: '#%'}},
    tooltip: {isHtml: true},
    series: {
      0: {
        color: '#FF0000', targetAxisIndex: 0 
      },
      1: {
        color: '#00FF00', targetAxisIndex: 0 
      },
      2: {
        color: '#0000FF', targetAxisIndex: 1, type: "line"
      }
    }
  };

  for (var i=1; i<data.length; i++) {
    data[i][3]=data[i][2]/data[i][1]-1;
  }
  

  $scope.test.data = data;
});

<!DOCTYPE html>
<html ng-app='myApp'>
<head>
    <script src="http://code.angularjs.org/1.4.9/angular.js"></script>
    <script src="script.js"></script>
    <script src="http://bouil.github.io/angular-google-chart/ng-google-chart.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div google-chart chart="test">
  </div>
  <h2>JSON:</h2>
  <pre style='clear:both; background-color: lightgray;'>{{test|json}}</pre>
</body>
</html>