How to use a formatted number as chart parameter in Rechart

posted on 10/9/2022, in learn

This post is a bit old and outdated. Rechart has evolved in the meantime.
Please refer to the more recent posts from here

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.

formatted number retool chart

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:


formatted number retool chart

Here the added property Dep with the correct number:

formatted number retool chart

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

formatted number retool chart