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 的圆环图。

ApexCharts Donut 使图例显示所有项目

ApexCharts Donut make the legend show all the items

reactjs

height

legend

apexcharts