8

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.

3 Answers 3

11

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

1
  • 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. Aug 12, 2019 at 8:26
5

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>

3
  • 1
    Does not work for axis labels (jsbin.com/xaxekusilu/1/edit?html,js,output) Aug 24, 2015 at 8:30
  • 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) Aug 26, 2015 at 8:27
  • 1
    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' Aug 27, 2015 at 9:35
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.