Изменить направление всплывающей подсказки в response-chartjs2

Question

Я реализовал response-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

Я думаю, вам нужно добавить дополнительную конфигурацию для вашей подсказки

Проверьте, что вы можете использовать для позиционирования и выравнивания вашей подсказки

Надеюсь, это поможет вам. Дайте мне знать, если у вас возникнут проблемы.