I am attempting to create a donut chart in apex charts similar to the one shown below (right), I have gotten pretty close, however I need to have some stroke or padding around the series items along the plot of the donut chart as shown.

current configuration

 const options = {
    chart: {
      type: 'donut',
      height: 150,
      width: '100%',
      offsetX: 50
    },
    plotOptions: {
      pie: {
        startAngle: 10,
        donut: {
          size: '90%',
          dataLabels: {
            enabled: 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: {
      enabled: 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']
  };

I am attempting to create a donut chart in apex charts similar to the one shown below (right), I have gotten pretty close, however I need to have some stroke or padding around the series items along the plot of the donut chart as shown.

current configuration

 const options = {
    chart: {
      type: 'donut',
      height: 150,
      width: '100%',
      offsetX: 50
    },
    plotOptions: {
      pie: {
        startAngle: 10,
        donut: {
          size: '90%',
          dataLabels: {
            enabled: 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: {
      enabled: 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']
  };

• javascript
• charts
• apexcharts

1 Answer 1

Try setting the stroke width to greater than 0 and give the stroke same color as the background.

stroke: {
  width: 4,
  colors: ['#1E252A']
}