How do you get a number formatter into a react-google-charts chart? (sorry; newb in react)

Question

I can get a formatter injected into a google chart to format multiple columns with code like this:

var formatter = new google.visualization.NumberFormat({ prefix: '$' });
formatter.format(dataTable, 1);
formatter.format(dataTable, 2);

I've tried setting "numberFormat:" and "formatters: []" in the react-google-charts options but they don't seem to work. Does anyone have an example?

Update:

This works to set the format of a single column:

<Chart
    chartType="ColumnChart"
    rows={rows}
    columns= {columns}
    width='100%'
    numberFormat={{column: 1, options: {fractionDigits: 2, prefix: '$'}}}
    ....
/>

This does not:

<Chart
    chartType="ColumnChart"
    rows={rows}
    columns= {columns}
    width='100%'
    formatters={[{type: 'NumberFormat', 
                  column: 1, 
                  options: {fractionDigits: 2, prefix: '$'}]}
    ...
/>

Answer 1

Solved: the formatters[] code is not in the current release. D'oh

Answer 2

Please following see the following https://react-google-charts.com/formatters#numberformat

formatters={[
   {
      type: "NumberFormat",
      column: 1,
      options: {
         prefix: "$",
         suffix: "%",
         negativeColor: "red",
         negativeParens: true,
       }
    }
]}

Answer 3

Trying to edit grouping symbol from default comma to space like below without solution. Can you please suggest solution?

<Chart
  chartType="LineChart"
  data={chartDataHidden}
  options={newOptions}
  width={width}
  height={height}
  chartEvents={chartEvents}
  formatters={[
    {
      type: 'NumberFormat',
      column: 1,
      options: {
        groupingSymbol: ' ',
      },
    },
  ]}
/>

Answer 4

I needed to format the Yaxis label to use currency options The formatters didn't work for me (I use React & Google charts for react) a well

The Only thing that worked, is adding the bAxes format to the main options for my Chart

const options = {
      title: 'USD',
      height: 500,
      pointSize: 5,
      vAxes: {
        0: { title: 'primary', format: 'currency' },
        1: { title: 'secondary' },
      },
      legend: {
        position: 'none',
      },
    };