Google Charts Axis Pattern/Format Adding Comma Instead Of Decimal

Question

No matter what I try, my gridline labels on both vertical and horizontal axes are showing a comma for a decimal.

For example, my column values are 1.1 to 6.8 and the gridline labels show something similar to 5,28, 5,52, etc.

I've tried setting both Axis.format = '#,###.##' and data.cols[0].pattern = '#,###.##'. Neither work. Is the pattern wrong?

BTW, I'm using angular-google-chart and I double checked that the options are getting passed to the google api correctly, and they are.

I saw some people talking about formatters but I find it hard to believe that the default for Google charts is to add a comma.

Also, I read the linechart and axis documentation on Google thoroghly.

Please help!

Answer 1

The format-pattern doesn't define which characters will be used as decimalSymbol and groupingSymbol. The formatted value will depend on the language-settings of the browser(Accept-Language)

To force a specific format you must load the API in a language which uses the desired format(e.g. 'en')

---

Some examples:

german

(decimalSymbol: comma , groupingSymbol: dot)

    google.load('visualization', '1.1', {packages: ['corechart'],language:'de'});
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Y');
      data.addColumn('number', 'Z');
      

      data.addRows([
        [4000.1,  1001.11, 1002.12],
        [4000.2,  1001.51, 1002.82],
        [4000.3,  1001.31, 1001.12]
      ]);

      var options = {
         vAxis: {
          format: '#,###.##'
        }, 
         hAxis: {
          format: '#,###.##'
        }
             
      };
      
      var chart = new google.visualization.LineChart(document.getElementById('linechart'));

      chart.draw(data, options);
    }

<div id="linechart"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

---

french

(decimalSymbol: comma , groupingSymbol: space)

    google.load('visualization', '1.1', {packages: ['corechart'],language:'fr'});
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Y');
      data.addColumn('number', 'Z');
      

      data.addRows([
        [4000.1,  1001.11, 1002.12],
        [4000.2,  1001.51, 1002.82],
        [4000.3,  1001.31, 1001.12]
      ]);

      var options = {
         vAxis: {
          format: '#,###.##'
        }, 
         hAxis: {
          format: '#,###.##'
        }
             
      };
      
      var chart = new google.visualization.LineChart(document.getElementById('linechart'));

      chart.draw(data, options);
    }

<div id="linechart"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

---

english

(decimalSymbol: dot , groupingSymbol: comma)

    google.load('visualization', '1.1', {packages: ['corechart'],language:'en'});
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Y');
      data.addColumn('number', 'Z');
      

      data.addRows([
        [4000.1,  1001.11, 1002.12],
        [4000.2,  1001.51, 1002.82],
        [4000.3,  1001.31, 1001.12]
      ]);

      var options = {
         vAxis: {
          format: '#,###.##'
        }, 
         hAxis: {
          format: '#,###.##'
        }
             
      };
      
      var chart = new google.visualization.LineChart(document.getElementById('linechart'));

      chart.draw(data, options);
    }

<div id="linechart"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

---