View the sum of active series in a DOM element

[faselunare]

I have been trying all possible solutions for days to have a card in my dashboard where on top of the graph I see the sum of the active series.

I figured out that I can have the sum with this code
var total = config.globals.seriesTotals.reduce((acc, val) => acc + val);

with this code I can view the total of the series when I load the card and scale the value as I disable the series by clicking on the legends

events: {
       mounted: function(chartContext, config) {
         var total = config.globals.seriesTotals.reduce((acc, val) => acc + val);

         document.querySelector("#total_<?= $rndid ?>").textContent = total+'<?= $currency ?>';
       },
legendClick: function(chartContext, seriesIndex, config) {
           var seriesTotals = config.globals.seriesTotals.reduce((acc, val) => acc + val); //sum of all series
           var series = config.globals.series;
           var serie = config.config.series[seriesIndex]; //clicked series
           var serieSum = serie.data.reduce((acc, val) => acc + val); //sum of the clicke series
        
           total = config.globals.seriesTotals.reduce((acc, val) => acc + val, 0) - seriesSum; //sum of all active series
           document.querySelector("#total_<?= $rndid ?>").textContent = total+'<?= $currency ?>';
       }
...

but when i go to reactivate the series, i have this error
caught TypeError: Reduce of empty array with no initial value

is there a method to do this? Chart type AREA (but i need the same also with LINE and BAR)

[peeter2]

There is a typo in your code.
var serieSum should probably be var seriesSum. But that doesn't fix your issue though.

Let me know if you find the solution.

Also, do you have any idea how to recount the Totals when chart is zoomed in? So it would get the totals for the active time range only.