How to specify the decimal separator in Google Charts?

Question

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.

Greed

Answer 1

Maybe, loading the lib with the correct location help some one (worked for me):

// Load Google Charts for the Portuguese locale.
google.charts.load('current', {'packages':['corechart'], 'language': 'pt'});

More on: https://developers.google.com/chart/interactive/docs/basic_load_libs#loadwithlocale

Halona

Playing with language could give you another problem - for example dates that includes month names will be translated to Portuguese as well so this solution is not very good. – Suzetta

Answer 2

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>

Domingodominguez

Does not work for axis labels (jsbin.com/xaxekusilu/1/edit?html,js,output) – Greed

You can control the formatting of label numbers with hAxis.format, for example: vAxis: { format:'$#,##0.00' } (see the updated answer for a more details) – Domingodominguez

Yes, already using a custom format, but this does not affect the decimal separator, even with a '0.0' format it comes out as '0,0' – Greed

Answer 3

If your data comes from a controller with model, you can just use model.data.replace(",","."). So google chart can show your float data.

Ethiopic