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>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'
}
}
}
}
},
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 '';
}
}
}
}
}
},