In this post you’ll learn how to properly use an already formatted number as parameter in a chart configuration.

It might happen to have in data sources some numbers already formatted, such as:

3,391.02 or even $147,844

Those are not true number for the computer.

If we want to use them as parameter for some calculation, such as defining the size of a bar chart, we need to convert it in some way.

In Rechart you can use the calculation section that allows to create or update property values in the dataset.

Suppose this data schema:

{
  "Date": "20-Aug-2020",
  "Description": "Cheque",
  "Deposits": "3,391.02",
  "Withdrawls": "00.00",
  "Balance": "83,839.30"
}

Deposits is clearly a formatted number and it won’t be calculated correctly in the data transformation for the chart.

In this specific case we can use number.unformat() to get back the numeric value of a formatted number:

numbro.unformat(datum.Deposits)

Here the added property Dep with the correct number:

Here a chart that uses the new property for a Bin calculation: