Fixing decimals on Apex Chart Donut

1

Hi there,

I’m working with some donut apex charts, but the value that appears when hovering over the specific section is displayed with too many decimals.
How can I shorten it?

The main problem I’m having is using apex charts docs with this version, as thinger uses some variables like ‘latest’ or ‘labels’ to refer to the widget configuration.
This is my code at the moment:

var options = {
    series: latest,
    chart: {
        type: 'donut'
    },
    labels: labels,
    dataLabels: {
        minAngleToShowLabel: 35,
        formatter: function (val, opts) {
            return `${val.toFixed(1)}%`;
        },
    }
};

image

Thank you in advance,

2

What is your data source?
Normally the rounding should be done there.

3

Hi there!

My data sources are all the same. Based on a cumulative value, I want to know how much of it has increased over a given time period.

image
image592×875 26.4 KB

Regards,

4

Sorry I did not express myself clearly: what is your hardware connected to thinger.io
and feeding the buckets?

5

It’s quite complex, but at the moment we’re using an electrical meter that sends information over LoRaWAN and its gateway and LNS.

The important thing is that the data is easily stored in data buckets with a maximum of 3 decimal places.

That’s why I don’t understand where the decimals came from and asked how I could I fix them.

6

The decimals come from the floating point format.
It’s a common problem, that you get quasi-infinite number of decimals upon many computed results.
You will find the huge number of decimals in the buckets too.
So I just asked, if you can program the data source freely.
The usual way is to format the data into strings with a definite number of decimals in the data source.

7

Unfortunately the devices connected to thinger.io are 3rd party. The only way I could change this was to change the dataflow inside node-red.
But then the data bucket would throw an error because I’m trying to write a string into the same bucket where a number used to be. So I would lose all the historical data.

Is there any way to fix the decimals within the widget?

8

Oh never mind, I just found a way to do that.

By using the dashboard functions feature I could just fix them.

function FixValue(value, ts, series){
    return parseFloat(value.toFixed(2));
}

image

Thank you @rin67630!

1 Like
9

Great, I will benefit from your solution too…
Thank you !

10

Additionally I have found that on Apex Charts:

This shows not only the axis with the desired number of decimals, but also works on the value display:

yaxis: {
    labels: {
        "formatter": function (val) {
            return val.toFixed(1);
        }
    }
},

Maybe you can use it in your donut too?

image
image1489×618 86.5 KB

11

As the donut chart does not have x or y axis I’m not sure it would be a valid solution for this case.

But it would definitely work with any other apex chart!

12

You many try the “formatter” paradigm on values too?

13

Hi!

Just for future reference, the following should work within the Apex charts options:

var options = {
    series: latest,
    chart: {
        type: 'donut',
    },
    labels: labels,
    tooltip: {
      y: {
        formatter: function(val) {
          return val.toFixed(2);
        }
      }
    }
};

Best Regards

1 Like