Me gustaría alinear al centro el total (valor 20/40) pero sin la etiqueta y también cambiar el color. Desafortunadamente, solo la etiqueta puede aceptar el color, pero aún así no se puede alinear verticalmente al centro.
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>Puede centrar el valor cambiando offsetY en plotOptions . También puedes cambiar color allí. https://apexcharts.com/docs/options/plotoptions/pie/#value
plotOptions: { pie: { donut: { labels: { show: true, total: {...}, value:{ offsetY: -8, // -8 worked for me color:'#ff00ff' } } } } },Pensé en responder a mi pregunta de cómo logré lograr esto finalmente.
Para aplicar color de fuente - En lugar de
total: formatter function(w) { } Usé la label: propiedad.
Para colocar el texto en el centro, tuve que buscar en el código de gráficos de Apex y encontré este código que usa 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 })Así es como se ven mis opciones de trama
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 ''; } } } } } },