在调整窗口大小时隐藏的chartjs-plugins-datalables？

Question

我正在使用Chart.js创建一个水平条形图，以及chartjs-plugin-datalabels来标记图形上的各个条形图。它主要起作用，但是当我调整浏览器大小时，插件标签有时会被隐藏 - 就像它被绘制在图形之外（即图形边框之外，而不是条形结束和图形边框之间）。这就像最大值有时是数据的最大值，而不是数据的最大数据加上足够的填充来附加我的标签。我在下面写了一个小提琴来演示我的问题。非常感谢任何帮助。

https://jsfiddle.net/coder_jb/3udfwzm6/

代码如下：

<div id="container" style="width:75%;">
  <canvas id="canvas"></canvas>
</div>

var ctx = document.getElementById("canvas").getContext("2d");
let barLabels = ["eth33", "eth34"];
let barData = [25, 20];
let barColors = ['rgba(0,0,230,1)', 'rgba(255,255,79,1)'];
let pktSrcBarChartConfig = {
  type: 'horizontalBar',
  data: {
    datasets: [{
      data: [barData[0]],
      label: barLabels[0],
      backgroundColor: barColors[0],
      pointStyle: "triangle"
    }, {
      data: [barData[1]],
      label: barLabels[1],
      backgroundColor: barColors[1],
      pointStyle: "triangle"
    }],
    labels: barLabels,
  },
  options: {
    tooltips: {
      callbacks: {
        title: function(chart, data) {
          return data.labels[chart[0].datasetIndex];
        }
      }
    },
    legend: {
      display: true,
    },
    scales: {
      xAxes: [{
        ticks: {
          min: 0,
        },
      }],
      yAxes: [{
        barPercentage: 0.5,
        ticks: {
            display: false
        }
      }]
    },
    plugins: {
      datalabels: {
        align: 'end',
        anchor: 'end',
        color: "black",
        formatter: function(value, context) {
          return context.chart.data.labels[context.dataIndex];
        }
      }
    }
  }
}
window.ch = new Chart(ctx, pktSrcBarChartConfig);