Wrong tooltip position

[evgenoid]

When I try to load page or change the window size where the map presents and try to hover some country, tooltip displays in wrong position.

To Reproduce

1. Just load the page or change widow size where the map is presented. Reproduces sometimes.

Expected behavior

Tooltip should be displayed near the country

Screenshots

Context

• Version: 4.3.1
• Browser: Google Chrome Version 127.0.6533.120 (Official Build) (arm64)

Additional context

List of countries from: https://unpkg.com/world-atlas/countries-50m.json

Configuretion:

    <Chart
      ref={chartRef}
      type="choropleth"
      data={{
        labels: countries.map((d: any) => d.properties.name),
        datasets: [
          {
            label: 'Countries',
            data: countries.map((d) => ({ feature: d })),
            backgroundColor: (context) =>
              isRegionOrContryWise?.includes((context.raw as any)?.feature?.properties?.name)
                ? themePalette.palette.primary700
                : themePalette.tokens.surfaceBadgesFillDefault,
          },
        ],
      }}
      options={{
        plugins: {
          tooltip: {
            backgroundColor: themePalette.palette.primary950_40,
            displayColors: false,
            filter: (context) => isRegionOrContryWise?.includes((context.raw as any)?.feature?.properties?.name),
            callbacks: {
              label: (context: any) => context.element.feature.properties.name,
            },
          },
          legend: {
            display: false,
          },
        },
        scales: {
          projection: {
            axis: 'y',
            projection: 'naturalEarth1',
          },
          color: {
            axis: 'x',
            display: false,
            quantize: 5,
          },
        },
      }}
    />

[sgratzl]

are those native chart.js tooltips or custom ones? I cannot see where the tooltip is supposed to pointing at.

[evgenoid]

are those native chart.js tooltips or custom ones? I cannot see where the tooltip is supposed to pointing at.

Normally it should appears near the country:

[sgratzl]

not sure what I can do here. The tooltip position is computed by:

chartjs-chart-geo/src/elements/GeoFeature.ts

Lines 142 to 162 in 9aacf4a

	getCenterPoint(): { x: number; y: number } {
	if (this.cache && this.cache.center) {
	return this.cache.center;
	}
	let center: { x: number; y: number };
	if (this.center) {
	const p = this.projectionScale.projection([this.center.longitude, this.center.latitude])!;
	center = {
	x: p[0]!,
	y: p[1]!,
	};
	} else {
	const centroid = this.projectionScale.geoPath.centroid(this.feature);
	center = {
	x: centroid[0],
	y: centroid[1],
	};
	}
	this.cache = { ...(this.cache || {}), center };
	return center;
	}

i.e you can provide a center point in your data or it will compute the centroid fo the geo shape/feature.

[sgratzl]

I can reproduce it in https://codepen.io/sgratzl/pen/gOaBQep but don't know yet what causes it

[steppy452]

@sgratzl I was able to reproduce this reliably by opening dev tools docked to the right or left side of the window, then closing. after closing is when i would see some tooltips be offset. if i reopen devtools, it goes back into place. my thoughts is that there's a window resize in this case that's not triggering recalculations of the canvas