2

I want to write a callback function for modifying tooltip's title & label content on bubble chart generated using ng2-charts. I already followed hint from Custom Tooltip for ng2-charts & Recreating Gapminder using Chart.js but since newest typescript on Angular 13 required to specify any function parameters, the code from those references are not working.

I have read the function's hint to help me specify the required data type for function parameter and figure out one of the data type for data (data: ChartData<'bubble'>), but still returns error since tooltipItem data type is wrong according to the function. Note that forcing the data type as any is also not working.

The error message is written below:

Error: src/app/bubble-chart/bubble-chart.component.ts:101:11 - error TS2322:
Type '(tooltipItem: TooltipItem<"bubble">[], data: ChartData<"bubble", BubbleDataPoint[], unknown>) => 
string | undefined' is not assignable to type
'(this: TooltipModel<keyof ChartTypeRegistry>, tooltipItems: TooltipItem<keyof ChartTypeRegistry>[]) =>
string | string[]'.

101           title: function (tooltipItem: TooltipItem<'bubble'>[], data: ChartData<'bubble'>) {

My current code for modifying bubble chart's tooltip is written bellow:

public bubbleChartOptions: ChartConfiguration['options'] = {
  plugins: {
    tooltip: {
      callbacks: {
        title: function (tooltipItem: TooltipItem<'bubble'>[],
          data: ChartData<'bubble'>) {
            const d = data.datasets[tooltipItem[0].datasetIndex];
            return d.label;
        },
      },
    },
  },
};
Welly Setiawan Limantoro
  • 51
  • 5
  • Just follow the exact signature ? –  Jun 17 '22 at 11:01
  • What do you mean by exact signature? Is it the way of writing code like 2 example that I provide on the question above? – Welly Setiawan Limantoro Jun 20 '22 at 01:50
  • 1
    I mean your function should follow this signature : `(this: TooltipModel, tooltipItems: TooltipItem[]) => string | string[]` –  Jun 20 '22 at 08:17
  • Unforfunately it's not working since `(this: TooltipModel, tooltipItems: TooltipItem[]) => string | string[]` is general function definition which can be overridden with certain data type. – Welly Setiawan Limantoro Jun 20 '22 at 09:51

0 Answers0