Chart.js tooltip async callbacks lack built‑in promise handling

Answer the question first

Chart.js v4 does not natively await promises returned from tooltip callbacks, so the library does not provide an automatic refresh mechanism. Developers must manually trigger a chart update after the async work finishes.

Likely explanation vs. confirmed facts

Confirmed facts (from the research brief):

• Tooltip callbacks run synchronously; any Promise they return is ignored and the tooltip renders before the async operation resolves.
• To show fetched data you must call chart.update() after the Promise settles.
• Race conditions can appear if multiple tooltips fire concurrently; a simple flag or promise‑chain can serialize updates.

Likely explanation (based on typical Chart.js behavior):

The library treats tooltip callbacks as pure, synchronous formatters. Adding native promise handling would require a major change to the rendering loop and could introduce latency or unexpected re‑renders, which is why the current design stays synchronous.

Steps needed for this case

1. In the tooltip callback, start the fetch and store the promise in a variable attached to the chart instance (e.g., chart._tooltipPromise).
2. When the promise resolves, write the fetched metadata into the chart’s data structure (e.g., chart.data.datasets[0].tooltipMetadata).
3. Call chart.update() to redraw the tooltip with the new data.
4. To avoid race conditions, guard the update with a flag: if chart._tooltipUpdating is true, skip the new request or wait for the current one to finish.

// Example pattern (Chart.js v4)
const chart = new Chart(ctx, {
  type: 'line',
  data: {/* … */},
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: async function(context) {
            // Prevent overlapping updates
            if (context.chart._tooltipUpdating) return 'Loading…';
            context.chart._tooltipUpdating = true;
            try {
              const resp = await fetch(`/proxy/metadata?id=${context.dataIndex}`);
              const meta = await resp.json();
              // Store metadata where the label can read it
              context.chart._tooltipMeta = meta;
            } finally {
              context.chart._tooltipUpdating = false;
            }
            // Trigger redraw after async work
            context.chart.update();
            return `${context.label}: ${context.chart._tooltipMeta?.value ?? '…'}`;
          }
        }
      }
    }
  }
});

Verifying the proxy does not leak credentials

• In unit tests, mock fetch (or use a library like msw) and assert that the request object does not contain authorization headers or cookies.
• Check that the proxy URL is never inserted into the DOM or emitted as a string in the rendered tooltip (e.g., snapshot test the tooltip content).
• Run the test suite with a network interceptor that fails if any outbound request includes sensitive headers; this will surface misconfigurations early.

Missing diagnostic detail

To confirm whether the described behavior applies to your setup, please specify the exact Chart.js version you are using (e.g., 4.4.0, 4.9.3). If you are on a newer v5 release, async tooltip support may differ and the recommendation could change.