Specify decimal places on summed stacks

💬 App Building
,
1
  1. My goal:

I want to force two decimals places for summed stacks on stacked bar chart components

  1. Issue:

None of the data in my table is more precise than the hundredths decimal place, but the automatic summed stack label generated in the component has some really long values. No idea where this is coming from, but I want a hard method of preventing this.

  1. Steps I've taken to troubleshoot:

Verified that my data is all only to the hundredths decimal place.

  1. Additional info:

Example here:

image
image570×233 4.98 KB

3

Hey Michael,

You bring up a great (and common!) question.

The solution comes from a quick line of JS that formats numbers to the hundredths place. I'm assuming you're mapping over an array of numbers, so your expression could look like this (where toFixed() sets which decimal place to be formatted):

{{ data.map(x => x.toFixed(2)) }}

If you're mapping over an array of strings, just wrap "x" in parseFloat() to convert it to a decimal:

{{ data.map(x => parseFloat(x).toFixed(2)) }}

Here's a screenshot of that in action in the Y data of a mock bar chart I created that maps over mock product costs:

format-decimal-places
format-decimal-places648×896 51.2 KB

Give that a try! If it still doesn't work, I'd be curious to know how the incoming data is being fed into the chart so I can help debug further.

Let me know!

Cheers,
Branden

4

This is coming straight from a sql query. The query already rounds the values to two decimals, so I just don't know where this is coming from. It seems more the trouble comes from the way that the grouped y-values are getting summed by the chart.

5

Hey Michael,

Agreed. Looks like the way JS handles decimal calculations is adding those tails. Did that solution above work for you?

6

Sorry for missing this reply last week. The solution did not work.

7

Hi Michael,

Thanks for giving that a try and letting me know it didn't work. I've escalated this issue internally to get some more eyes on this so we can investigate further. I'll keep you posted here as soon as I have an update!

Thanks,
Branden

1 Like
9

I have the same issue. In the Series Data labels options you can change the number of displayed decimals places. Could this same option be added to the “Summed stacks data label”?

image
image391×240 4.57 KB

image
image431×313 6.93 KB

image
image458×339 20.8 KB

1 Like
10

I think that would be a reasonable solution, @mikeheiss! I'll add this note to the internal convo that Branden already kicked off and get back to you as soon as I can. :+1:

1 Like