typescriptchart.jschart.js3

Chart.js 3.x custom positioners: cannot use them in TypeScript


I'm using ChartJS v3 and I'm trying to implement a custom tooltip positioner, as described in the docs:

https://www.chartjs.org/docs/master/configuration/tooltip.html#position-modes

However, the problem is that I'm coding in TypeScript and the type checking is fighting me over this. The first problem is that I cannot define the custom positioner like in the example:

const tooltipPlugin = Chart.registry.getPlugin('tooltip');
tooltipPlugin.positioners.myCustomPositioner = ...

because the type returned by getPlugin() does not contain the positioners property.

The second problem is when you then have to configure the plugin. I cannot do this:

plugins: {
    tooltip: {
      position: 'myCustomPositioner',
      ...
    }
}

because the position property only accepts the defaults built in values ('average' and 'nearest') but does not take a custom string.

How do I work around this? I wasa happy that the latest ChartJS provides strong types, but they are no use if the make core features of the library unusable... what am I missing?


Solution

  • for escape complication error i just resolved by using 'as' operator.

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