Change border color of donut chart

Question

I made a DONUT chart with APEXCHARTS. It looks like this:

Here is my code:

 var options = { series: [44, 55, 41, 17, 15], labels: ['Apple', 'Mango', 'Orange', 'Watermelon', 'test'], chart: { type: 'donut', foreColor: '#ffffff' }, grid: { borderColor: "#EF3252" }, plotOptions: { pie: { expandOnClick: false } }, responsive: [{ breakpoint: 480, options: { chart: { width: '100%' }, legend: { position: 'bottom' } } }], datasets: [{ borderColor: ["#EF3252"] }] }; var chart = new ApexCharts(document.getElementById("stats1_chart1"), options); chart.render();

 <div id="stats1_chart1"></div> <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

I want to achieve to change the border-color. But I can't figure out how this should work.
~Marcus

Answer 1

Just add the stroke attribute:

 var options = { series: [44, 55, 41, 17, 15], labels: ['Apple', 'Mango', 'Orange', 'Watermelon', 'test'], chart: { type: 'donut', foreColor: '#ffffff' }, grid: { borderColor: "#EF3252" }, plotOptions: { pie: { expandOnClick: false } }, stroke:{ colors:['#000'] }, responsive: [{ breakpoint: 480, options: { chart: { width: '100%' }, legend: { position: 'bottom' } } }], datasets: [{ borderColor: ["#EF3252"] }] }; var chart = new ApexCharts(document.getElementById("stats1_chart1"), options); chart.render();

 <div id="stats1_chart1"></div> <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

Answer 2

To completely remove stroke, do following;

stroke: {
        show: false,
        width:0
    },