Flexmonster - Cannot format values in first column

Question

I'm trying to configure the following code in order to format the PROFIT column (which is the first one) as a currency.

Here you have a JSFiddle with the code below which is not working in a snippet:

https://jsfiddle.net/tlg265/eo1bkjwy/

Right now the values in that column are getting shown as:

1243898
1538192
1921982

But I want them to get shown as:

$1,243,898
$1,538,192
$1,921,982

Here you have a preview...

And below is the code, where you can see I introduced a new format: currency which I tried to use for that first column: PROFIT, but had no success.

$(function() {
  let pivot = new Flexmonster({
    container: "pivot-container",
    componentFolder: "https://cdn.flexmonster.com/",
    toolbar: false,
    report: {
      data: [{
          "Profit": "1243898",
          "Following": 81,
          "Followers": 242,
        },
        {
          "Profit": "1538192",
          "Following": 728,
          "Followers": 2178,
        },
        {
          "Profit": "1921982",
          "Following": 4423,
          "Followers": 12387,
        },
        {
          "Profit": "1243898",
          "Following": 63,
          "Followers": 189,
        },
        {
          "Profit": "1538192",
          "Following": 342,
          "Followers": 931,
        },
        {
          "Profit": "1538192",
          "Following": 487,
          "Followers": 1242,
        },
        {
          "Profit": "1921982",
          "Following": 3827,
          "Followers": 15281,
        },
        {
          "Profit": "1243898",
          "Following": 97,
          "Followers": 279,
        },
        {
          "Profit": "1538192",
          "Following": 242,
          "Followers": 728,
        },
        {
          "Profit": "1921982",
          "Following": 4921,
          "Followers": 12489,
        },
        {
          "Profit": "1243898",
          "Following": 69,
          "Followers": 182,
        },
      ],
      formats: [{
          name: "",
          thousandsSeparator: " ",
          decimalSeparator: ".",
          decimalPlaces: -1,
          maxDecimalPlaces: -1,
          maxSymbols: 20,
          currencySymbol: "",
          negativeCurrencyFormat: "-$1",
          positiveCurrencyFormat: "$1",
          isPercent: "false",
          nullValue: "",
          infinityValue: "Infinity",
          divideByZeroValue: "Infinity",
          textAlign: "right",
          beautifyFloatingPoint: true,
        },
        {
          name: "currency",
          currencySymbol: "$",
        },
      ],
      slice: {
        rows: [{
          uniqueName: "Profit",
          format: "currency",
        }],
        columns: [{
          uniqueName: "[Measures]",
        }],
        measures: [{
            uniqueName: "Following",
          },
          {
            uniqueName: "Followers",
          },
        ],
      },
    },
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div id="pivot-container"></div>

Do you have any idea on how can I make this to work?

Answer 1

I could not find how in the flexmonster documentation so I made my own

https://jsfiddle.net/mplungjan/acuk3vjn/

const fmt = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 })

data: [......].map(({Profit,Following,Followers}) => ({Profit:`${fmt.format(Profit)}`,Following,Followers})),

I also added currency to the other columns

formats: [
  {
    name: "",
    thousandsSeparator: ",",
    decimalSeparator: ".",
    decimalPlaces: -1,
    maxDecimalPlaces: -1,
    maxSymbols: 20,
    currencySymbol: "$",

Giving a result of