ApexCharts Donut使图例显示所有项目

Question

有没有一种方法可以使所有图例选项显示在甜甜圈顶点上。目前，它使用的是滚动条，我不希望这样做，我希望所有图例选项在垂直形式下都可见。Image of the donut chart with a scrollbar legend

理想情况下，我希望它看起来像这样，但不确定需要更改哪些设置。Ideal donut chart

这些是我正在使用的当前选项：

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

这些是默认的fontSize和height为什么不尝试减小第一个值并增大第二个值？

legend: {
      fontSize: '14px',
      height: undefined,

  }

Answer 2

通常来说，最好使用您提到的chart height option来调整图表区域中可见的内容。

如果出于任何原因这都不适合您使用，那么您将需要开始覆盖默认CSS。

以下应完成的技巧：

.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;
}

这里是codepen，与甜甜圈图一起使用。