Highcharts堆叠条形图左侧虚线标记无法正常显示问题咨询

问题根源 #

你当前采用「透明非堆叠柱子+边框」的方式模拟虚线标记，因为图表配置margin: [70,0,0,0]左侧边距为0，柱子最左侧边框刚好落在画布可视区域外，因此显示不全。同时该实现方式非官方规范方案，适配性较差，另外你原代码中charWidth为拼写错误，正确属性是chartWidth。

官方推荐解决方案：使用y轴绘图线（plotLines） #

Highcharts原生支持在坐标轴上自定义标记线，无需额外新增系列，可完美解决裁切问题，修改后完整代码如下：

Highcharts.chart('container', {
  chart: {
    type: 'bar',
    chartWidth: 520,
    chartHeight:300,
    // 左右各留少量边距，避免线被裁切
    margin: [70,10,0,10]
  },
  xAxis: {
    categories: ['Jan'],
    visible: false
  },
  yAxis: {
    min: 0,
    visible: false,
    // 新增绘图线配置
    plotLines: [{
      // 虚线显示的数值位置，对应你原来的55
      value: 55,
      color: 'red',
      dashStyle: 'ShortDash',
      width: 2,
      // 调整层级确保显示在柱子上方
      zIndex: 5
    }]
  },
  plotOptions: {
    series:{
      stacking:'normal'
    },    
    dataLabels: {
      enabled : false
    }
  },
  series: [
    {
      name: 'John',
      data: [{y: 15}]
    }, 
    {
      name: 'Jane',
      data: [{y: 22}]
    }, 
    {
      name: 'Joe',
      data: [{y: 33}]
    }
    // 删除原来模拟虚线的额外系列
  ]
});

原有实现方案的修复方式 #

如果你坚持使用现有系列模拟的方式，只需要修改两处配置即可：

• 将margin: [70,0,0,0]修改为margin: [70,0,0,2]，左侧留足边框宽度的显示空间
• 给模拟虚线的系列新增pointPadding: 0配置，避免虚线上下偏移

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