How to specify the decimal separator in Google Charts

decimaldecimal-pointgoogle-visualizationseparator

Is there a way to specify the decimal separator in Google Charts?

By default it seems to be based on the locale, however the need I have is to have the decimal separator to be a "dot" rather than the comma for some locales (my users are in a locale where comma as decimal separator is the default, but considered old-fashioned/obsolete)

This would be for all numbers, from axis labels to tooltips. The rest of the locale options would be unchanged.

Best Answer

Google Visualization API provides formatters that can be used to reformat data in a visualization

According to NumberFormat:

Describes how numeric columns should be formatted. Formatting options include specifying a prefix symbol (such as a dollar sign) or the punctuation to use as a thousands marker.

The below example demonstrates how to apply formatter to Salary column in order to render its value using . symbol (decimalSymbol and groupingSymbol properties of NumberFormat object are used for that purpose) 

google.load("visualization", "1", { packages: ["table"] });
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time');
    data.addRows(5);
    data.setCell(0, 0, 'John');
    data.setCell(0, 1, 10000);
    data.setCell(0, 2, true);
    data.setCell(1, 0, 'Mary');
    data.setCell(1, 1, 25000);
    data.setCell(1, 2, true);
    data.setCell(2, 0, 'Steve');
    data.setCell(2, 1, 8000);
    data.setCell(2, 2, false);
    data.setCell(3, 0, 'Ellen');
    data.setCell(3, 1, 20000);
    data.setCell(3, 2, true);
    data.setCell(4, 0, 'Mike');
    data.setCell(4, 1, 12000);
    data.setCell(4, 2, false);

    var formatter = new google.visualization.NumberFormat({ prefix: '$',decimalSymbol: '.', groupingSymbol: '.' });
    formatter.format(data, 1); // Apply formatter to second column

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1]);

    
    var table = new google.visualization.Table(document.getElementById('table_div'));
    table.draw(view, { width: '420px', height: '240px' });
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="table_div"></div>

Update

According to Customizing Axes you can control the formatting of label numbers with hAxis.format and vAxis.format

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time');
    data.addRows(5);
    data.setCell(0, 0, 'John');
    data.setCell(0, 1, 0.1000);
    data.setCell(0, 2, true);
    data.setCell(1, 0, 'Mary');
    data.setCell(1, 1, 0.2500);
    data.setCell(1, 2, true);
    data.setCell(2, 0, 'Steve');
    data.setCell(2, 1, 0.800);
    data.setCell(2, 2, false);
    data.setCell(3, 0, 'Ellen');
    data.setCell(3, 1, 0.2000);
    data.setCell(3, 2, true);
    data.setCell(4, 0, 'Mike');
    data.setCell(4, 1, 0.1200);
    data.setCell(4, 2, false);

    var formatter = new google.visualization.NumberFormat({ prefix: '$', decimalSymbol: '.', groupingSymbol: '.' });
    formatter.format(data, 1); // Apply formatter to second column

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1]);


    var table = new google.visualization.LineChart(document.getElementById('table_div'));
    table.draw(view, { width: '420px', height: '240px', vAxis: { format:'$#,##0.00'  }  });
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="table_div"></div>

Related Topic