On several places in DataPicta, you can use the formatter to customize how certain elements are displayed in your chart. This includes how the legehnd, tooltips, and data labels are shown.

Formatter for the axes labels

Lets start with a simple example. Here we have data for fruit prices:

Fruit,Price
Apple,1.2
Banana,0.8
Cherry,2.5
Date,3.0
Elderberry,1.5

A bar chart created with this data looks like this:

The bar has its prices on the vertical (y) axis and the fruit names on the horizontal (x) axis. But the chart does not show any currency symbol for the prices. Also the data does not have any units. You can fix that using the formatter.

Adding a currency symbol

In the DataPicta app, you can open the vertical axis panel and enable the label, here you can find the formatter input field. To add a dollar sign ($) in front of the prices, you can use the following format string:

"$" || item

The $ adds the dollar sign and the || operator concatenates (joins) the dollar sign with the actual value represented by item. After applying this formatter, the chart looks like this:

It is very common to also add the cents to the value, even if they are zero. So instead of just showing $1, it is better to show $1.00. Lets change the formatter to do that:

"$" || item || (
  item % 1 == 0 ? '.00' :
    (item * 10) % 1 == 0 ? '0' : ''
) 

This might look a bit complicated, but it is not that hard to understand. The first line is the same as before, prepending the dollar sign. Then we use parentheses to group the next lines. On the next two lines we see an expression in the format A ? B : C. This is a conditional expression that means "if A is true, then use B, otherwise use C". Here, A is item % 1 == 0, which checks if the value is a whole number (i.e., has no decimal part). If it is a whole number, it adds .00. If it is not a whole number, it goes to the next line, which is another conditional expression. This one checks if the value has one decimal place by multiplying it by 10 and checking if that is a whole number. If it has one decimal place, it adds a 0. If it has two decimal places, it adds nothing (an empty string).

After applying this formatter, the chart looks like this: