How to set the formatting on the axes in Google Ch

Question

I want to change the formatting of the values on the axis to look like so:

1
100
1 000
10 000
100 000
1 000 000

Meaning, I'd like to change the default grouping symbol to a space (' '). So far I tried with different approaches but none of them worked. Even the documentation couldn't help me much. Anyone?

Important:

1. I want to change the formatting on the values on the axis, not the inner values.

2. I don't want to change the language of the google chart.

Answer 1

use option --> ticks -- to provide custom labels for either axis

hAxis or vAxis

using object notation, provide both a value v: and a formatted value f:

    hAxis: {
      ticks: [
        {v: 0, f: '1'},
        {v: 1, f: '100'},
        {v: 2, f: '1 000'},
        {v: 3, f: '10 000'},
        {v: 4, f: '100 000'},
        {v: 5, f: '1 000 000'}
      ]
    },

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0'],
    [0, 0],
    [1, 1],
    [2, 2],
    [3, 3],
    [4, 4],
    [5, 5],
    [6, 6]
  ]);
  var options = {
    hAxis: {
      ticks: [
        {v: 0, f: '1'},
        {v: 1, f: '100'},
        {v: 2, f: '1 000'},
        {v: 3, f: '10 000'},
        {v: 4, f: '100 000'},
        {v: 5, f: '1 000 000'}
      ]
    },
    vAxis: {
      ticks: [
        {v: 0, f: '1'},
        {v: 1, f: '100'},
        {v: 2, f: '1 000'},
        {v: 3, f: '10 000'},
        {v: 4, f: '100 000'},
        {v: 5, f: '1 000 000'}
      ]
    }
  };
  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

EDIT

you can use a number formatter to create the number pattern

var formatLabel = new google.visualization.NumberFormat({
  groupingSymbol: ' ',
  fractionDigits: 0
});

format the data table to see the format on the tooltips

// format tooltips
formatLabel.format(data, 1);

still need to create custom labels to see on the axis

// create axis labels
var axisTicks = [];
var axisRange = data.getColumnRange(1);
for (var i = axisRange.min; i <= axisRange.max; i=i+1000) {
  axisTicks.push({
    v: i,
    f: formatLabel.formatValue(i)
  });
}

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0'],
    [0, 1000],
    [1, 2000],
    [2, 3000],
    [3, 6000],
    [4, 10000]
  ]);

  var formatLabel = new google.visualization.NumberFormat({
    groupingSymbol: ' ',
    fractionDigits: 0
  });

  // format tooltips
  formatLabel.format(data, 1);

  // create axis labels
  var axisTicks = [];
  var axisRange = data.getColumnRange(1);
  for (var i = axisRange.min; i <= axisRange.max; i=i+1000) {
    axisTicks.push({
      v: i,
      f: formatLabel.formatValue(i)
    });
  }

  var options = {
    height: 400,
    pointSize: 4,
    vAxis: {
      ticks: axisTicks
    }
  };
  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>