如何防止插入 y 轴标签与 Highcharts 中的数据列重叠？

Question

虽然我能够识别和配置我的 Higharts 图表以将 y 轴标签插入绘图区域，但我无法阻止它们与数据列重叠，如下例所示。

鉴于 Highcharts 有很多配置选项，我认为有一种方法可以防止重叠，或者通过为 y 轴标签“保留空间”，或者通过调整绘图区域，或者其他可能的方法。

我的期望是，随着添加更多数据点，列之间的差距会进一步缩小，并且没有列会把自己定位在 y 轴标签下方。换句话说，我希望绘图区域开始向右一点，以某种方式考虑 y 轴标签的宽度。

这可能吗？

查看当前结果、预期的餐巾纸草图和我的配置文件。

CodePen 示例

Highcharts.chart('container', {
  chart: {
    height: 320,
    width: 452,
    style: {

        fontFamily: 'Inter var',
      },
  },  
  title: {
    align: 'left',
    margin: 40,
    style: {
      fontSize: 14,
      fontWeight: 'bold',      
    },
    text: 'Cash balance reducing linearly'
  },
  subtitle: {
    align: 'left',
    style: {
      fontSize: 13,
      color: '#797675'
    },
    text: 'Cash balance has been predictable for the past 5 months'
  },
  xAxis: {
    categories: [
      "Something long",
      "Something long",
      "Something long",
      "Something long",
      "Something long",
      "Something long",
    ],
    labels: {
      autoRotation: undefined,
      style: {
        color: '#3d3b3b'
      },
    }
  },
  yAxis: {    
    min: 0,
    labels: {
      align: 'left',            
      autoRotation: undefined,
      reserveSpace: false,
      style: {
        color: '#3d3b3b'
      },
      x: 4,
      y: -4,
      format: '${text}',
      formatter: ''
    },    
    plotLines: [
      {
        color: '#000',
        width: 1,
        value: 0,
        zIndex: 4,
      }
    ],
    title: {
      align: 'high',
      margin: 0,
      reserveSpace: false,
      rotation: 0,
      style: {
        color: '#3d3b3b'
      },
      text: 'Cash (millions)',
      textAlign: 'left',
      x: 40,
      y: -4
    }
  },
  plotOptions: {
    column: {
      pointPadding: 0.3,
      groupPadding: 0,
      borderWidth: 0,
      maxPointWidth: 40,
    }
  },
  series: [
    {
      name: 'Cash balance',
      type:'column',
      data: [
        12541723, 
        12261236, 
        11956359, 
        11624971, 
        11956359, 
        11624971, 
        11956359, 
        11624971, 
        11264766
      ],
      pointWidth: 30,
      yAxis: 0
    }
  ],
  colors: ['#79c298'],
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  }
});

P.S：我也可以通过稍微作弊来模拟所需的结果，并向数据集添加一个初始

0

值：

Answer 1

您可以通过使用更长的刻度来实现这一点。更改将包括设置刻度的长度、宽度和颜色。由于

xAxis.line

不同的颜色，您还需要单独更改第一个刻度的颜色。

示例代码：

 chart: {
    events: {
      load() {
       // Change color of the first yAxis tick
        this.yAxis[0].ticks[0].mark.attr({
          stroke: '#ccd6eb'
        });
      }
    },
    ...
  },
 yAxis: {
    tickLength: 40,
    tickWidth: 1,
    tickColor: '#e6e6e6',
    labels: {
       align: 'left',
       ...
    }
    ...
  },

演示： https://jsfiddle.net/BlackLabel/6tgevja9/