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=""></script>

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/npm/apexcharts"></script>

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

• javascript
• html
• css
• apexcharts

2 Answers 2

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/npm/apexcharts"></script>

To pletely remove stroke, do following;

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