Trying to use React Google Charts, I am facing a problem when I want to format several columns. In all the examples I found on the web, only one column is formatted through one of these two methods:
Method 1:
<Chart
chartType="Table"
width="700px"
height="50%"
data={data2}
options={options}
numberFormat={
{
column: 6,
options: {
suffix: " €",
negativeColor: "red",
negativeParens: true,
}
}
}
/>`
Method 2:
const formatters = [
{
type: "NumberFormat",
column: 4,
options: {
pattern: "#",
}
}]
<Chart
chartType="Table"
width="700px"
height="50%"
data={data2}
options={options}
formatters={formatters}
/>
Method 1 and Method 2 work fine but if I want to format columns 4 and 6, by extending the formatting array in any of the methods, only the first column will be formatted.
For example, I tried Method 2 with:
const formatters = [
{
type: "NumberFormat",
column: 4,
options: {
pattern: "#Kg",
}
},
{
type: "NumberFormat",
column: 6,
options: {
suffix: " €",
negativeColor: "red",
negativeParens: true,
}
}
]
and only column 4 was formatted. If I permut the records then only column 6 will success. Trying to play with brackets and/or parenthesis did not help.