Wrong tooltip position

[evgenoid]

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

To Reproduce

1. Just load the page 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