How to specify decimal separator in Google Charts?

Question

Is there a way to specify a decimal separator in a Google Chart?

By default this looks like a locale, however I need the decimal separator to be a “dot” and not a comma for some locales (my users are in the locale where the comma is like the default decimal separator, but is considered old-fashioned / deprecated)

This will be for all numbers, from axis labels to tooltips. Other parameters of the locale will not be changed.

Answer 1

The Google Visualization API provides formatting tools that you can use to reformat data in a visualization.

According to NumberFormat :

Describes how numeric columns should be formatted. Formatting options include specifying a prefix character (such as a dollar sign) or punctuation to use as a thousand token.

The following example shows how to apply a formatter to a column Salaryto display its value using a character .(this uses the properties decimalSymboland the NumberFormatgroupingSymbol object )

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>

Run codeHide result

Update

hAxis.format 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>

Hide result

Answer 2

, lib ( ):

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

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

Answer 3

, model.data.replace(",", "."). , Google Chart .