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

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

在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.1)"
        }
      }
    ],yAxes: [
      {
        gridLines: {
          display: true,categorySpacing: 90,drawBorder: false,0.1)"
        },ticks: {
          beginAtZero: true,min: 0,max: 100,stepSize: 20,padding: 20
        }
      }
    ]
  }
};

内部渲染

<Bar
  data={data}
  width={100}
  height={400}
  options={barChartOptions}
/>
lovers_php 回答:在react-chartjs2中更改工具提示方向

  

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

检查可用于Tooltip的位置和对齐方式的

希望这会对您有所帮助。让我知道您是否有任何问题。

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

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

本文链接:https://www.f2er.com/3160302.html

大家都在问