ApexCharts Donut make the legend show all the items

Question

Is there a way to make it so that all the legend options show on a donut apexchart. Currently it's using a scrollbar and I don't want this, I want all the legend options to be visibile in a vertical formation. Image of the donut chart with a scrollbar legend

Ideally I'd want it to look something like this, but not sure what settings need to be changed. Ideal donut chart

These are the current options I am using:

const options = {
chart: {
  events: {
    dataPointSelection: onClick,
    markerClick: onClick,
    legendClick: onClick
  },
  type: 'donut',
  animations: {
    enabled: true,
    easing: 'easeinout',
    speed: 80,
    animateGradually: {
      enabled: true,
      delay: 1500
    },
    dynamicAnimation: {
      enabled: true,
      speed: 350
    }
  }
},
stroke: {
  colors: [theme.colors.backgroundPrimary]
},
theme: {
  mode: 'light',
  monochrome: {
    enabled: true,
    color: '#B9B9B9',
    shadeTo: 'dark',
    shadeIntensity: 0.9
  },
},
dataLabels: {
  enabled: false,
  foreColor: '#fff',
  padding: 4,
  borderRadius: 2,
  borderWidth: 1,
  borderColor: '#fff',
  opacity: 0.5
},
legend: {
  show: true,
  labels: {
    colors: [theme.colors.textPrimary],
    useSeriesColors: false
  }
},
tooltip: {
  custom: (stuff: any) => {
    const index = stuff.seriesIndex;
    return (
      `<div class="apex-tool">
        <span>${labels[index]}</span>
        </div>`
    );
  }
},
labels: labels,
responsive: [{
  breakpoint: 480,
  options: {
    chart: {
      width: 200
    },
    legend: {
      position: 'bottom',
    }
  }
}, {
  breakpoint: 1200,
  options: {
    chart: {
      height: '150px',
      width: '100%',
      events: {
        dataPointSelection: onClick,
        markerClick: onClick,
        legendClick: onClick
      },
      type: 'donut',
      animations: {
        enabled: true,
        easing: 'easeinout',
        speed: 80,
        animateGradually: {
          enabled: true,
          delay: 1500
        },
        dynamicAnimation: {
          enabled: true,
          speed: 350
        }
      }
    },
    stroke: {
      colors: [theme.colors.backgroundPrimary]
    },
    theme: {
      mode: 'light',
      monochrome: {
        enabled: true,
        color: '#B9B9B9',
        shadeTo: 'dark',
        shadeIntensity: 0.9
      },
    },
    dataLabels: {
      enabled: false,
      foreColor: '#fff',
      padding: 4,
      borderRadius: 2,
      borderWidth: 1,
      borderColor: '#fff',
      opacity: 0.5
    },
    legend: {
      height: '200px',
      width: '100%',
      show: true,
      labels: {
        colors: [theme.colors.textPrimary],
        useSeriesColors: false
      }
    },
    tooltip: {
      custom: (stuff: any) => {
        const index = stuff.seriesIndex;
        return (
          `<div class="apex-tool">
            <span>${labels[index]}</span>
            </div>`
        );
      }
    },
    labels: labels,
  }
}, {
  breakpoint: 992,
  options: {
    chart: {
      height: '250px',
      events: {
        dataPointSelection: onClick,
        markerClick: onClick,
        legendClick: onClick
      },
      type: 'donut',
      animations: {
        enabled: true,
        easing: 'easeinout',
        speed: 80,
        animateGradually: {
          enabled: true,
          delay: 1500
        },
        dynamicAnimation: {
          enabled: true,
          speed: 350
        }
      }
    },
    stroke: {
      colors: [theme.colors.backgroundPrimary]
    },
    theme: {
      mode: 'light',
      monochrome: {
        enabled: true,
        color: '#B9B9B9',
        shadeTo: 'dark',
        shadeIntensity: 0.9
      },
    },
    dataLabels: {
      enabled: false,
      foreColor: '#fff',
      padding: 4,
      borderRadius: 2,
      borderWidth: 1,
      borderColor: '#fff',
      opacity: 0.5
    },
    legend: {
      show: true,
      labels: {
        colors: [theme.colors.textPrimary],
        useSeriesColors: false
      }
    },
    tooltip: {
      custom: (stuff: any) => {
        const index = stuff.seriesIndex;
        return (
          `<div class="apex-tool">
            <span>${labels[index]}</span>
            </div>`
        );
      }
    },
    labels: labels,
  }
}],

}

Answer 1

Generally speaking it would be a better approach do use the chart height option, which you mention, to adjust what is visible in the chart area.

If this for whatever reason is not suitable for your use, then you'll need to start overriding the default CSS.

The following should do the trick:

.apexcharts-canvas svg {
  /* Allow the legend to overflow the chart area */
  overflow: visible;
}

.apexcharts-canvas svg foreignObject {
  /* Allow the legend to overflow the legend container */
  overflow: visible;
}

Here's a codepen of it working with a donut chart.