I am trying to replicate a donut chart in apex charts that is similar to the one displayed on the right. While I have made significant progress, I am still in need of adding stroke or padding around the series items on the donut chart plot, as shown in the example.
Current Setup
const settings = {
visual: {
type: 'donut',
height: 150,
width: '100%',
offsetX: 50
},
design: {
pie: {
startAngle: 10,
donut: {
size: '90%',
dataLabels: {
activated: false
},
labels: {
show: true,
name: {
show: true,
offsetY: 38,
formatter: () => 'Completed'
},
value: {
show: true,
fontSize: '48px',
fontFamily: 'Open Sans',
fontWeight: 500,
color: '#ffffff',
offsetY: -10
},
total: {
show: true,
showAlways: true,
color: '#BCC1C8',
fontFamily: 'Open Sans',
fontWeight: 600,
formatter: (w) => {
const total = w.globals.seriesTotals.reduce(
(a, b) => a + b,
0
);
return `${total}%`;
}
}
}
}
},
},
dataLabels: {
activated: false
},
labels: ['Completed', 'Cancelled', 'Pending', 'Failed'],
legend: {
show: false,
position: 'right',
offsetX: -30,
offsetY: 70,
formatter: (value, opts) => {
return value + ' - ' + opts.w.globals.series[opts.seriesIndex];
},
markers: {
onClick: undefined,
offsetX: 0,
offsetY: 25
}
},
fill: {
type: 'solid',
colors: ['#8BD742', '#BCC1C8', '#78AEFF', '#F74D52']
},
stroke: {
width: 0
},
colors: ['#8BD742', '#BCC1C8', '#78AEFF', '#F74D52']
};