this is my donut chart (ApexCharts):

var options = {
            series: [umsatzSum, ausgabenSum, auslagenSum],
            chart: {
                type: 'donut',
                height: 320,
                fontFamily: chartFontStyle
            },
            labels: ["Umsatz", "Ausgaben", "Auslagen"],
            colors:['#7ebd0b', '#661818', "#333"],
            track: {
                background: "#cccccc"
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                colors:['#7ebd0b', '#661818', "#333"],
            },
            plotOptions: {
                pie: {
                    donut: {
                        labels: {
                            show: true,
                            value: {
                                formatter: function (val,chart) {
                                    let valPercent = val/chart.config.series.reduce((a, b) => a + b, 0)*100;
                                    return Math.round(valPercent) + "%"
                                }  
                            }
                        }
                    }
                }
            }
        
var chart = new ApexCharts(document.querySelector("#myChart"), options);
chart.render();

Result:

And If I mouse over a series element, it will show this:

And If I click on the series element, the percent value in the middle stays How can I realize, that the percent value will be show at the beginning (after the chart was created), without hover or click an element first?