Change tool-tip direction in react-chartjs2

Question

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

How can i achieve 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
        }
      }
    ]
  }
};

inside render

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

Nicolette

try to override css of your tooltip. – Clapp

Answer 1

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

The problem is I don't know a way that the caret is in the middle of your box.

Danelle

A simple yAlign: "bottom" worked for me, thank you @headhunterKev – Ockeghem

Answer 2

I think you need to add more configuration for your tooltip

Check what you can use for position and alignment of your Tooltip

Clapp

i referred the document but could find a solution. can you help? – Nicolette

tooltip.alignment = "center"; try to change alignment as per document – Clapp