如何为ApexCharts水平堆叠条形图设置固定宽度（不受数据值影响）

要让水平堆叠条形图的条形保持固定宽度，不受数据值影响，你可以通过配置plotOptions.bar里的barWidth属性实现，具体操作如下：

• 确保图表配置中开启水平模式与堆叠模式：plotOptions.bar.horizontal: true、plotOptions.bar.stacked: true
• 在plotOptions.bar中添加barWidth，设置为固定像素值或百分比（百分比基于分类轴的可用空间）

示例代码 #

var options = {
  chart: {
    type: 'bar',
    height: 350,
    // 可选：固定图表整体宽度，避免布局挤压
    // width: 600
  },
  plotOptions: {
    bar: {
      horizontal: true,
      stacked: true,
      // 设置固定条形宽度，比如25像素
      barWidth: '25px',
      // 或者用百分比，比如占分类轴空间的40%
      // barWidth: '40%'
    }
  },
  series: [
    {
      name: 'Series 1',
      data: [44, 55, 41, 67, 22]
    },
    {
      name: 'Series 2',
      data: [13, 23, 20, 8, 13]
    },
    {
      name: 'Series 3',
      data: [11, 17, 15, 15, 21]
    }
  ],
  xaxis: {
    categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5']
  }
}

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

注意事项 #

• 使用百分比设置barWidth时，会根据分类轴的垂直空间自动计算宽度，适合响应式场景
• 若图表布局仍有挤压，可在chart配置中固定width属性，或调整grid.padding预留空间

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