如何在React ApexCharts中设置柱状图柱子的固定宽度？

要将ApexCharts柱状图的柱子宽度固定为50px，你需要调整plotOptions.bar中的配置项，以下是正确的实现方式：

问题分析 #

你当前使用的columnWidth是相对分类容器宽度的百分比值，无法直接设置固定像素宽度。要实现固定像素宽度，需要使用barWidth属性并配合distributed配置。

修正后的代码 #

options={{
  plotOptions: {
    bar: {
      distributed: true, // 开启后每个柱子独立分配空间，确保固定宽度生效
      barWidth: 50, // 设置固定柱子宽度为50px
    },
  },
  yaxis: {
    labels: {
      minWidth: 0,
      maxWidth: 50,
    },
  },
}}

关键说明 #

• distributed: true：让每个柱子占据所属分类的全部可用空间，避免相邻柱子的宽度影响，确保barWidth的固定值能准确生效
• barWidth: 50：直接指定柱子的固定像素宽度，替换你原来使用的百分比类型的columnWidth

内容的提问来源于stack exchange，提问作者Mamunur Rashid