JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.highcharts.com/js/testing.js"></script>
<div id="container" style="width: 450px; height: 350px">
</div>
<div>
    
Chart total: <span id="sumDisp"></span>

JavaScript

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'column',
        events: {
            load: function(event) {
                var chart = this;
                $.each(chart.series, function(i, v) {
                    $(v.legendItem.element).trigger('click');
                });
                $.each(chart.series, function(i, v) {
                    $(v.legendItem.element).trigger('click');
                });
            }
        }
    },
    plotOptions: {
        series: {
            events: {
                legendItemClick: function(event) {
                    var series = this,
                        index = series.index,
                        chart = series.chart,
                        chartTotal = 0;
                    $.each(chart.series, function(i, s) { 
                        if((i != index && s.visible) || (i == index && !s.visible)) {
                            var seriesTotal = 0;
                            $.each(s.data, function(i, d) {
                                seriesTotal += d.y;
                            });
                            chartTotal += seriesTotal;
                        }
                    });
                    $('#sumDisp').text(chartTotal);
                }
            }
        }
    },
    series: [{
        color: 'red',
        data: [[10, 1000], [20, 2000], [30, 3000], [40, 4000]]
    }, {
        color: 'black',
        data: [[40, 2000], [20, 1000], [30, 1000]]
    }]
});