Charts with Formatters not working

[psweb]

Wappler 4.2.0
Mac M1 Big Sur

Using Charts component with a dataset stops working if I add a Format Currency formatter on the prices column.

Tried This

<dmx-chart id="chart1" dmx-bind:data="sc_reporting_rezdy_orders.data.custom_group_by_source" labels="roi_source" dataset-1:label="Total Earned" dataset-1:value="all_total_paid.formatCurrency('NOK', '.', ',', 2)" points="true" smooth="true" dataset-2:label="Commission Paid Out" dataset-2:value="all_total_commission" legend="top" responsive="true"></dmx-chart>

As well as this

<dmx-chart id="chart1" dmx-bind:data="sc_reporting_rezdy_orders.data.custom_group_by_source" labels="roi_source" dataset-1:label="Total Earned" dataset-1:value="all_total_paid.toNumber().formatCurrency('NOK', '.', ',', 2)" points="true" smooth="true" dataset-2:label="Commission Paid Out" dataset-2:value="all_total_commission" legend="top" responsive="true"></dmx-chart>

If I remove the formatter my line is graphed again as expected.

[Teodor]

Hi Paul,
it is probably the formatting you applied:

all_total_paid.toNumber().formatCurrency('NOK', '.', ',', 2)

results in values like NOK1,200.00 which are not valid numbers.

[psweb]

So is there some way to make it view in a graph with the currency formatter on so when i hover over the point it does not look like this.

But rather NOK998,351.50 as it just makes it easier to read with larger numbers like these.

EDIT: I do see what you are saying though, if the tooltip displayed number is the same number as the graph uses to draw, then I can understand it has no way to graph NOK1,200.00 as it is no longer a number, just wondering if there is a way to only format the tooltip displayed number, and leave the actual data for the data point as it so it can still graph correctly.

[swf]

I’m currently also working with the charts and tested it. It looks like formats can’t be applied to dataset-values. Means if I format 2000 to 2000.00 the chart isn’t showing any data any more.

You could maybe pass the formatted number as another field from the server action and place it in the labels, but the raw number still shows in the value part of the tooltip.

[Teodor]

Ok we have a small update for you guys.

Please unzip and replace the existing js file with this one:

dmxCharts.zip (2.4 KB)

Then in order to display the value formatted in the tooltip, use it like:

dataset-1:tooltip="$value.formatCurrency('NOK', '.', ',', 2)"

If you want to show the Total Earned (i.e. the label text) as well do it like:

dataset-1:tooltip="$label + ': ' + $value.formatCurrency('NOK', '.', ',', 2)"

Not sure if that will be included in today’s update UI, but it’s easy enough to manually add it as in the example above.

[psweb]

Thank you so much, you made my day, so happy, works perfectly.

EDIT: Just to double check @Teodor even though this is working perfectly as I have it, was I meant to delete any of the existing stuff or just add the new like below.

<dmx-chart id="chart1" dmx-bind:data="sc_reporting_rezdy_orders.data.custom_group_by_source" labels="roi_source" dataset-1:label="Total Earned" dataset-1:value="all_total_paid" dataset-1:tooltip="$label + ': ' + $value.formatCurrency('NOK', '.', ',', 2)" dataset-2:label="Commission Paid Out" dataset-2:value="all_total_commission" dataset-2:tooltip="$label + ': ' + $value.formatCurrency('NOK', '.', ',', 2)" legend="top" responsive="true" points="true" point-style="rect"></dmx-chart>

[Teodor]

You shouldn’t remove anything Just add the dataset-1:tooltip... part.

[Teodor]

This has been improved in Wappler 4.2.1