Apexchart donut display wrong total figure

Question

Donut Chart Image

The total sum should 31,392.82 but the total displayed in the donut chart is 31392.8299999999996.

1. Am I doing anything wrong? or is it a apexchart bug?
2. How can I format the total show thousand separator & to 2 decimal places.

labels and series code below:

let colorPalette = ['#00D8B6', '#008FFB', '#FEB019', '#FF4560', '#775DD0'];
let usage_by_category_labels = [ "Entertainment", "Food", "Household Items/Supplies", "Insurance", "Medical/Healthcare", "Miscellaneous", "onCloud","Personal", "Transport","Utilities"];

let usage_by_category_series = [78.80, 15381.25, 307.90, 1170.00, 663.90,                 4938.92, 2506.12, 2522.85, 3152.11, 670.97];

Answer 1

It's called floating-point error: https://floating-point-gui.de/

Just round the value in formatter https://apexcharts.com/docs/options/plotoptions/pie/#totalFormatter

formatter: function (w) {
  let result = w.globals.seriesTotals.reduce((a, b) => a + b, 0)
  return Math.round(result * 100) / 100 // * 100 for 2 decimal numbers
}