Apex Charts等宽图表实现问询：带/无X轴标签柱状图对齐问题

核心想法 #

别用CSS硬写宽度数值，靠Highcharts自身配置让两个图表的绘图区域（柱子所在的核心区域）宽度完全一致，同时控制X轴标签的布局，不让它乱占额外宽度，或者让带标签的图表自动跟无标签的sparkline对齐。

具体配置方法 #

1. 先统一基础布局

给两个图表都设置相同的布局参数，把默认的内外边距全清掉：

chart: {
  spacing: [0, 0, 0, 0], // 上、右、下、左的间距全设为0
  margin: [0, 0, 0, 0],
  style: {
    padding: 0 // 容器内边距也清掉
  }
},
plotOptions: {
  column: {
    pointPadding: 0,
    groupPadding: 0,
    borderWidth: 0 // 去掉柱子边框，避免多占宽度
  }
}

2. 处理带X轴标签的图表

要避免标签让容器变宽，要么把标签调整到绘图区域内合理位置，要么让图表自动计算宽度，同时强制跟无标签的sparkline宽度一致：

xAxis: {
  categories: ['标签1', '标签2', '标签3'],
  labels: {
    align: 'center',
    y: 15, // 微调标签位置，别超出容器范围
    overflow: 'allow', // 允许标签溢出，用`crop: false`也可以
    style: {
      whiteSpace: 'nowrap' // 强制标签不换行
    }
  },
  lineWidth: 0,
  tickWidth: 0 // 去掉X轴线条和刻度，减少额外空间占用
},
// 直接取无标签图表的宽度赋值给当前图表
chart: {
  width: document.querySelector('.sparkline-chart').offsetWidth
}

3. 动态适配标签内容变化

如果标签内容会动态更新，可以在图表渲染完成后自动调整宽度，保证两个图表始终对齐：

chart: {
  events: {
    render: function() {
      const sparklineWidth = document.querySelector('.sparkline-chart').offsetWidth;
      this.container.style.width = `${sparklineWidth}px`;
      this.redraw(); // 重绘图表适配新宽度
    }
  }
}

另一种思路：共享绘图区域宽度 #

先渲染无标签的sparkline图表，拿到它的绘图区域宽度，再把这个值设给带标签的图表，保证两个图表的柱子区域宽度完全一致，标签放在外部但容器宽度用CSS统一控制：

.chart-container {
  width: 100%;
  max-width: 400px; /* 按你的需求设置统一宽度 */
}

然后在JS中实现：

// 先渲染无标签的sparkline图表
const sparklineChart = Highcharts.chart('sparkline-container', {
  sparkline: { enabled: true },
  // 其他配置项
});

// 获取sparkline的绘图区域宽度
const plotWidth = sparklineChart.plotWidth;

// 渲染带标签的图表，设置相同的绘图区域宽度
Highcharts.chart('labeled-chart-container', {
  chart: {
    plotWidth: plotWidth,
    spacing: [0,0,0,0],
    margin: [0,0,0,0]
  },
  xAxis: {
    // 你的X轴配置
  },
  // 其他配置项
});

这么处理不管标签内容怎么变化，两个图表的核心绘图区域宽度始终一致，容器宽度也能保持对齐，完全不用依赖魔法数值。

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