[Chartjs]-Chart.js 3.x custom positioners: cannot use them in TypeScript

by

0👍

✅

for escape complication error i just resolved by using ‘as’ operator.

tooltip:{
 position: 'myCustomPositioner' as 'average',
}

8👍

The proper way to do this is to extend the positioners map typings to include your custom function.
Refer to https://www.chartjs.org/docs/3.4.1/developers/charts.html, which includes how to extend the typings for custom charts, it is similar to this.

By just casting the position, as the solution from @bangash, you are tricking the compiler. That solution also does not solve the problem when you create the positioner.

Note: This expects you are using ChartJS 3.x

Create a file called chartjs.d.ts somewhere in your project that tsconfig.json reads from, for example @types/chartjs.d.ts

import type { TooltipPositionerFunction } from 'chart.js';

declare module 'chart.js' {
  // Extend tooltip positioner map
  interface TooltipPositionerMap {
    cursor: TooltipPositionerFunction<ChartType>;
  }
}

Then, create your function where you are registering your components:

import { Tooltip } from 'chart.js'

// Create positioner to put tooltip at cursor position
Tooltip.positioners.cursor = function (chartElements, coordinates) {
  return coordinates;
};

Now you can use your cursor as position property of the tooltip.

Leave a comment