在Angular 4的Highcharts上添加自定义动态div / element

Question

我想在Highcharts上绘制自定义div或元素。我试图在CSS中使用position：relative和position：absolute来将div放在Highcharts上。我需要帮助设置叠加层div的底部位置和高度。

这是我的图表代码

HTML

<div class="lab-result-graph"> <div [chart]="chart"></div> <div style="height:16%; bottom: 37%;" class="lab-result-range"></div> </div>

角度

this.getAxes();
    this.chart = new Chart({
      title: { text: null },
      chart: { height: 75, type: 'line', margin: [0, 0, 20, 0] },
      xAxis: {
        title: { text: null },
        categories: this.xAxisValues,
        gridLineDashStyle: 'ShortDash',
        gridLineColor: '#e1e1e1',
        gridLineWidth: 1,
        labels: {
          style: {
            color: 'black',
            fontSize: '9px'
          }
        }
      },
      yAxis: {
        title: { text: null },
        visible: false
      },
      plotOptions: {
        series: { connectNulls: true }
      },
      series: [
        {
          name: '',
          data: this.yAxisValue
        }
      ],
      legend: { enabled: false },
      credits: { enabled: false }
    });

结果

现在查看图像。图表生成良好。图表上的绿色叠加层有问题。此覆盖图必须是动态的。实际上，此覆盖图显示了最佳值范围。这可能会根据“参考间隔”（显示在图表的右上方）而改变。

要更好地理解它，请参见以下图片：

如果看到图像，则蓝色箭头指向的值11.1将是Y轴上绿色叠加层的起始值或点，红色箭头指向的值将是叠加条的终点或高度（或绿色div）。

当前，我已经将CSS position: absolute用于div.lab-result-graph和position: absolute; width:100以及div.lab-result-range元素的内联样式。但是我需要任何适当且完善的解决方法来将绿色叠加层放置在图表上。我不能以百分比形式使用CSS底部和高度值，因为父div（div.lab-result-graph）还包含X轴上标签的高度，大约是父div（div.lab）高度的20-25％ -结果图）。