在react-chartjs2中更改工具提示方向 [英] Change tool-tip direction in react-chartjs2

问题描述

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

I have implemented the react-chartjs2 https://www.npmjs.com/package/react-chartjs-2 in my react app. I have implemented it successfully but i need to change the direction of the tooltip when hovering the chart. Currently it looks like this

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

But i want my tooltip to look like this

我该如何实现

我的图表和图表选项代码

My code for chart and chart options

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

推荐答案

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

I think you need to add more configuration for your tooltip

检查可用于工具提示

这篇关于在react-chartjs2中更改工具提示方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！