Chart.js-每个条形图的注释

我被赋予了创建仪表板的任务。大多数元素都很简单，但有一个是比较两组数据的图形。我得到的设计是这样的

使用Chart.js，我成功地得到了两个条形图，但我试图为每个条形图创建一些注释，以创建绿色区域，但效果并不理想。我猜我使用的插件是错误的，或者完全遗漏了一些东西。每个注释似乎跨越了整个图形

如果您能提供一些建议，我们将不胜感激。非常感谢

var data = {
  labels: ["H2000", "H4000", "H4500"],
  datasets: [{
    label: "First",
    backgroundColor: 'rgba(191, 191, 191, 1)',
    borderWidth: 1,
    barPercentage: 1,
    categoryPercentage: 1,
    fill: true,
    data: [10, 20, 30],
    xAxisID: "bar-x-axis1",
  }, {
    label: "Second",
    backgroundColor: 'rgba(54, 162, 235, 1)',
    borderWidth: 1,
    barPercentage: 1,
    categoryPercentage: 1,
    fill: true, 
    data: [5, 30, 35],
    xAxisID: "bar-x-axis2",
  }]
};

var options = {
  responsive: true,
  scales: {
    xAxes: [{
      stacked: true,
      id: "bar-x-axis1",
      barThickness: 80,
    }, {
      display: false,
      stacked: true,
      id: "bar-x-axis2",
      barThickness: 100,
      type: 'category',
      categoryPercentage: 1,
      barPercentage: 1,
      gridLines: {
        offsetGridLines: true
      },
      offset: true
    }],
    yAxes: [{
      stacked: false,
      ticks: {
        beginAtZero: true
      },
    }]

  },
  annotation: {
     annotations: [{
        type: 'box',
        onlyForDataIndex: 0,
        datasetIndex: 0,
        linePadding: 0,
        id: 'bar-x-axis1',
        drawTime: 'beforeDatasetsDraw',
        yScaleID: 'y-axis-0',
        yMin: 25,
        yMax: 55,
        backgroundColor: 'rgba(0, 255, 0, 0.1)'
     }, {
        type: 'box',
        onlyForDataIndex: 1,
        datasetIndex: 1,
        linePadding: 0,
        id: 'bar-x-axis2',
        drawTime: 'beforeDatasetsDraw',
        yScaleID: 'y-axis-0',
        yMin: 5,
        yMax: 15,
        backgroundColor: 'rgba(0, 255, 0, 0.1)'
     }]
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});