javascript - 在 react-chartjs2 中更改工具提示方向

Question

我已经在我的反应应用程序中实现了 react-chartjs2 https://www.npmjs.com/package/react-chartjs-2 。我已经成功实现了它，但我需要在悬停图表时更改工具提示的方向。目前它看起来像这样

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

我怎样才能做到这一点

我的图表和图表选项代码

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}
/>

Answer 1

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

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

Answer 2

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

检查可用于工具提示的位置和对齐的内容