Apex Donut charts center align Total

Question

I would like to center align the total (value 20/40) but without the label and also change the color. Unfortunately, only label can accept color but still it cant be vertically center aligned.

 var options = {
        series: [20,40],
        plotOptions: {
            pie: {
                donut: {
                    labels: {
                        show: true,                       
                        total: {
                            show: true,
                            showAlways: true,
                            label: '',                           
                            formatter: function (w) {
                                return w.globals.seriesTotals.reduce((a, b) => {
                                    return `${a}/${b}`
                                })
                            }
                        }
                    }                   
                }
            }
        },        
        colors: ['#0065bd', '#dbecf8'],
        chart: {
            type: 'donut',
        },
        dataLabels: {
            enabled: false,
        },
        legend: {
            show: false,
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: 200
                }
            }
        }]
 }
var chart = new ApexCharts(
  document.querySelector("#responsive-chart"),
  options
);

chart.render();

@import url('https://fonts.googleapis.com/css?family=Poppins');

* {
  font-family: 'Poppins', sans-serif;
}

#chart {
  max-width: 260px;
  margin: 35px auto;
  opacity: 0.9;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.35.3/apexcharts.min.js" integrity="sha512-yhdujT21BI/kqk9gcupTh4jMwqLhb+gc6Ytgs4cL0BJjXW+Jo9QyllqLbuluI0cBHqV4XsR7US3lemEGjogQ0w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="chart">
  <div id="responsive-chart"></div>
</div>

Answer 1

Thought I would answer my question how I managed to achieve this finally.

To apply font colour - Instead of

total: formatter function(w) {
}

I used label: property.

To position the text to center, I had to dig through the Apex charts code and found this code which is using name.OffsetY to position.

https://github.com/apexcharts/apexcharts.js/blob/main/src/charts/Pie.js

 if (dataLabelsConfig.name.show) {
  let elLabel = graphics.drawText({
    x,
    y: y + parseFloat(dataLabelsConfig.name.offsetY),
    text: name,
    textAnchor: 'middle',
    foreColor: labelColor,
    fontSize: labelFontSize,
    fontWeight: labelFontWeight,
    fontFamily: labelFontFamily
  })

This is how my plotoptions looks like

        plotOptions: {
        pie: {
            donut: {
                labels: {
                    show: true,
                    name: {
                        offsetY: 10,
                    },                        
                    total: {
                        show: true,
                        showAlways: true,
                        fontSize: '22px',
                        fontFamily: 'Helvetica, Arial, sans-serif',
                        fontWeight: 600,
                        label: `${data[0]}/${data[1]}`,
                        color: '#0065bd',                            
                        formatter: function (w) {
                            return '';
                        }
                    }
                }                   
            }
        }
    }, 

Answer 2

You can center value by change offsetY in plotOptions. You can also change color there. https://apexcharts.com/docs/options/plotoptions/pie/#value

plotOptions: {
  pie: {
    donut: {
      labels: {
        show: true,
        total: {...},
        value:{
          offsetY: -8, // -8 worked for me
          color:'#ff00ff'
        }
      }
    }
  }
},