Javascript 在react-chartjs2中更改刀尖方向

我已经实现了react-chartjs2 在我的应用程序中。我已经成功地实现了它，但是我需要在悬停图表时更改工具提示的方向。现在看起来是这样的

但我希望我的工具提示看起来像这样

我怎样才能做到这一点

我的图表代码和图表选项

const barChartOptions = {
  tooltips: {
    custom: function(tooltip) {
      if (!tooltip) return;
      // disable displaying the color box;
      tooltip.displayColors = false;
    },
    callbacks: {
      // use label callback to return the desired label
      label: function(tooltipItem, data) {
        return tooltipItem.yLabel + " kWh";
      },
      // remove title
      title: function(tooltipItem, data) {
        return;
      }
    }
  },
  responsive: true,
  maintainAspectRatio: false,
  legend: {
    display: false
  },
  scales: {
    xAxes: [
      {
        barPercentage: 1,
        barThickness: 10,
        gridLines: {
          display: false,
          color: "rgba(0, 0, 0, 0.1)"
        }
      }
    ],
    yAxes: [
      {
        gridLines: {
          display: true,
          categorySpacing: 90,
          drawBorder: false,
          color: "rgba(0, 0, 0, 0.1)"
        },
        ticks: {
          beginAtZero: true,
          min: 0,
          max: 100,
          stepSize: 20,
          padding: 20
        }
      }
    ]
  }
};

内部渲染

<Bar
  data={data}
  width={100}
  height={400}
  options={barChartOptions}
/>

---

我认为您需要为工具提示添加更多配置

检查您可以使用什么来定位和对齐

---

问题是我不知道插入符号在你的盒子的中间。

我查阅了文档，但是可以找到一个解决办法。您能帮忙吗？tooltip.alignment=“center”；尝试根据文档更改对齐方式尝试覆盖工具提示的css。

options: {
    tooltips: {
      yAlign: "bottom"
    }
}