Search code examples
javascripthtmlapexcharts

plotOptions - show values at the beginning

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: enter image description here

And If I mouse over a series element, it will show this: enter image description here

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?

Solution

  • https://apexcharts.com/docs/options/plotoptions/pie/#total total will be shown when no series is selected or hovered over.

          labels: {
        show: true,
        value: {
          formatter: function (val,chart) {...}
        },
        total: {
          show: true,
          label: 'Umsatz',
          color: '#7ebd0b',
          formatter: function (chart) {
            let seriesToShowId = 0
            let val = chart.config.series[seriesToShowId]
            let valPercent = val/chart.config.series.reduce((a, b) => a + b, 0)*100;
            return Math.round(valPercent) + "%"
          }
        }
      }