How to get the datapoint index number in custom positioner for tooltips?

[Udemology]

I am trying to understand the tooltip. As this is one of items I want to truly learn about Chart.js. However I struggle to get it correctly. I am using a basic HTML file without import and I am very close to the answer but not quite.

I get an error of the dataPoint which grabs the index number of the hovered tooltip. I do not know how to transfer that value to the x. Or perfect there is another method which would be more suitable?

I did read and studied this example: https://www.chartjs.org/docs/latest/samples/tooltip/position.html, but I just cannot figure it out. As that requires import which I do not use in my HTML file. I hope someone can shed a light on this item.

    Chart.Tooltip.positioners.bottom = function(elements, eventPosition) {
      const {chartArea: {bottom}, scales: {x, y} } = this.chart;

      if (this.dataPoints) {
        const dataPoint = this.dataPoints[0].dataIndex;
        console.log(dataPoint)
      }

      return {
        x: x.getPixelForValue(dataPoint),  <------ Error = dataPoint
        y: bottom,
        xAlign: 'center',
        yAlign: 'bottom'
      };
    };

[stockiNail]

@Udemology I think the issue here is that the dataPoints are created after positioner invocation:

Chart.js/src/plugins/plugin.tooltip.js

Lines 644 to 645 in 916aa6e

	const position = positioners[options.position].call(this, active, this._eventPosition);
	tooltipItems = this._createItems(options);

It seems the 2 statements rows might be inverted in the plugin, without any issue. Tests are needed.

[stockiNail]

@Udemology what do you think the following examples (are going to what you want?), because having a look to your code, you can do in different ways:

The tooltip is fixed in the position of X element

    Chart.Tooltip.positioners.bottom = function(elements, eventPosition) {
      const {chartArea: {bottom}, scales: {x, y} } = this.chart;
      return {
        x: x.getPixelForValue(x.getValueForPixel(eventPosition.x)),  
        y: bottom,
        xAlign: 'center',
        yAlign: 'bottom'
      };
    };

or (on a bar chart, the tooltip scrolls on the element width)

    Chart.Tooltip.positioners.bottom = function(elements, eventPosition) {
      const {chartArea: {bottom}, scales: {x, y} } = this.chart;
      return {
        x: eventPosition.x,  
        y: bottom,
        xAlign: 'center',
        yAlign: 'bottom'
      };
    };

[Udemology]

Thank you @stockiNail, it works very well. The upper result is the perfect solution I was looking for. I truly appreciate it.