echarts: [Bug] tooltip.formatter option is not typed correctly

Version

5.4.2

Link to Minimal Reproduction

https://github.com/yay/echarts-tooltip-type-bug

Steps to Reproduce

Uncomment the following piece of code in main.ts in the linked GitHub repo to see the TypeScript error:

// tooltip: {
//   formatter: (params) => {
//     return `${params.name}, ${params.seriesName}`; // BUG: `name` and `seriesName` are unavailable because of incorrect typing
//   },
// },

Current Behavior

Can’t access name, seriesName (and other props that are actually populated) in the params object passed to the tooltip formatter function because of incorrect typing echarts exposes.

Expected Behavior

Expected to access name, seriesName and other fields on the params object that are de facto there, but are missing in the declared type.

Environment

- OS: macOS 13.5
- Browser: Chrome 115.0.5790.170 (Official Build) (arm64)
- Framework: echarts 5.4.2 in a vanilla TypeScript app

Any additional comments?

No response

About this issue

Original URL
State: open
Created 10 months ago
Reactions: 1
Comments: 15 (7 by maintainers)

Most upvoted comments

That’s because tooltip formatter params don’t have axisLabel property.

But I saw the axisLabel on the params object when I log it to console?

It seems like name works (and is the same as axisLabel?) so if I use params[0].name and typecase the whole tooltip as you suggest it fixes the problem. Thank you

kewp on Sep 19, 2023

@ChepteaCatalin Thanks! Yes, I’ve already switched to a slightly shorter type since I created this issue, which is similar to your suggestion:

formatter: ((params: echartsTypes.DefaultLabelFormatterCallbackParams[]) => {
  ...
}) as echartsTypes.TooltipComponentOption['formatter'],

yay on Sep 15, 2023

@yay I suggest you use the following workaround, which appears less awkward:

        tooltip: {
            formatter: (params: echarts.DefaultLabelFormatterCallbackParams) => {
                return `${params.name}, ${params.seriesName}`;
            }
        } as echarts.TooltipComponentOption

params is expected to be of type TooltipComponentFormatterCallbackParams which is an alias for

type TopLevelFormatterParams = CallbackDataParams | CallbackDataParams[];

TypeScript will try to infer the most general type from the union that encompasses both possibilities even if you want to infer only CallbackDataParams type. In your case, CallbackDataParams[] is inferred because it’s more general than just CallbackDataParams. So, you have to set explicitly that you want CallbackDataParams, which is exported as DefaultLabelFormatterCallbackParams.

As mentioned in the documentation, params can take the form of either an object or an array so I don’t think that we should change anything in the library. @plainheart, what are your thoughts on this?

ChepteaCatalin on Sep 13, 2023