0

I am trying to define a callback function in my chartJS options. for some reason, i get this error on my label definition:

Type '(tooltipItem: ChartTooltipItem, data: ChartData) => number | number[] | ChartPoint' is not assignable to type '(tooltipItem: ChartTooltipItem, data: ChartData) => string | string[]'. What am I doing wrong?

options: {
    tooltips: {
        callbacks: {
          title: (tooltipItems, data) => {
            return '';
          },
            label: (tooltipItem, data) => {
            const datasetLabel = '';
            return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
          }
        }
Flash
  • 792
  • 2
  • 15
  • 36
  • 1
    Hi, Well it's basically what the error is telling you, your returning string & string[ ] when number types expected, if you provide a [stackblitz](https://stackblitz.com/) or add details on your example that repeats your error I gladley fork or give example code. Else i recommend reading [this](https://stackoverflow.com/questions/14667713/how-to-convert-a-string-to-number-in-typescript) and [this](https://stackoverflow.com/questions/12792695/typescript-casting-arrays/35181988#35181988) SO posts. – Lucho Nov 28 '20 at 21:02
  • It may be too large for a stackblitz but its compiling fine but it justs has that red underline error. it looks like it's coming from the library `node_modules/@types/chart.js/index.d.ts:242:9 242 label?(tooltipItem: ChartTooltipItem, data: ChartData): string | string[]; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ The expected type comes from property 'label' which is declared here on type 'ChartTooltipCallback'` – Flash Nov 30 '20 at 16:41
  • Not sure what you mean to big, you only need to replicate the issue itself. It's from the typings folder for the library – Lucho Nov 30 '20 at 20:31
  • Its weird but I got it working by just adding the `any` type to the parameters like this: `label: (tooltipItem, data: any)` – Flash Nov 30 '20 at 21:21
  • not really, you simply telling the ts-compiler that the data property does not have any typings and can simply include what ever you prefer. Not the TS way to go but it does the work just to make it "work". – Lucho Nov 30 '20 at 21:24
  • what would be the correct way to fix it? – Flash Nov 30 '20 at 21:37
  • Either way if you change your mind of trying to get it work the correct way, here's a [stackblitz](https://stackblitz.com/edit/angular-ivy-chartjs-get-started-example?file=src/app/example-chart/example-chart.component.ts) of "get started example" of chart.js using angular for you to play around with if you get stuck someday. – Lucho Nov 30 '20 at 21:39
  • 1
    the correct way would be so figure out your typing issues if it's the typings/lib thats the problem itself if so using "any" is one way to go :) – Lucho Nov 30 '20 at 21:41
  • Thanks, Side question though I was trying to use `yAlign: 'top'` to change the position of the tooltip but it looks like `yAlign` property is no longer apart of the options? – Flash Nov 30 '20 at 22:45
  • The [docs](https://www.chartjs.org/docs/latest/configuration/tooltip.html) says otherwise :) – Lucho Dec 01 '20 at 07:32
  • https://stackoverflow.com/questions/44050238/change-chart-js-tooltip-caret-position – Flash Dec 01 '20 at 16:22

0 Answers0