[Bug] EChartsOption missing tooltip when creating pie chart data series

[fireflysemantics]

Version

5.4.2

Link to Minimal Reproduction

https://stackblitz.com/edit/stackblitz-starters-v7ee5w?file=src%2Fecharts.component.ts

Steps to Reproduce

The chart is created like this using ngx-echarts:

import {
  ChangeDetectionStrategy,
  Component,
  OnInit,
  ViewEncapsulation,
} from '@angular/core';
import { NgxEchartsModule, NGX_ECHARTS_CONFIG } from 'ngx-echarts';
import { fromEvent, debounceTime } from 'rxjs';
import { EChartsOption, graphic } from 'echarts';

@Component({
  standalone: true,
  imports: [NgxEchartsModule],
  providers: [
    {
      provide: NGX_ECHARTS_CONFIG,
      useFactory: () => ({ echarts: () => import('echarts') }),
    },
  ],
  selector: 'app-animated-bar-chart',
  template:
    '<div style="height: 300px;" echarts (chartInit)="onChartInit($event)" [autoResize]="false" [options]="options"></div>',
  styles: [
    `app-animated-bar-chart {
    display:block;
}`,
  ],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AnimatedBarChartComponent implements OnInit {
  private data: number[] = [300, 520, 435, 530, 730, 620, 660, 860];

  echartsIntance: any;

  //  options!: EChartsOption;
  options!: EChartsOption;
  //options!: any;
  constructor() {
    this.resize();
  }
  ngOnInit(): void {
    this.options = {
      tooltip: {
        trigger: 'item',
        formatter: '',
      },
      series: [
        {
          name: ' ',
          clockwise: true,
          type: 'pie',
          radius: ['65%', '100%'],
          center: ['50%', '50%'],
          data: [
            {
              value: 500,
              name: 'Solana',
              label: {
                position: 'center',
                formatter: '',
                fontSize: 22,
                fontWeight: 600,
                fontFamily: 'Roboto',
                color: 'blue',
              },
              tooltip: {},
            },
            {
              value: 500,
              name: 'Tether',
            },
            {
              value: 1000,
              name: 'Golem',
            },
          ],
        },
      ],
    };
  }

  resize() {
    fromEvent(window, 'resize')
      .pipe(debounceTime(200))
      .subscribe((e) => {
        console.log('RESIZE');
        if (this.echartsIntance) {
          this.echartsIntance.resize({
            animation: {
              duration: 1500,
              easing: 'elasticOut',
            },
          });
        }
      });
  }

  onChartInit(echarts: any) {
    this.echartsIntance = echarts;
  }
}

Current Behavior

The EChartsOption should allow for specifying a tooltip when creating a pie chart data series. I've documented the rest in this Stackoverflow question with a runnable example.

https://stackoverflow.com/questions/77442901/adding-a-tooltip-configuration-to-a-pie-chart-data-item-in-echarts

Expected Behavior

It should compile. However this error is produced.

Error in src/echarts.component.ts (66:15)
Type '{ name: string; clockwise: true; type: "pie"; radius: string[]; center: string[]; data: ({ value: number; name: string; label: { position: "center"; formatter: string; fontSize: number; fontWeight: number; fontFamily: string; color: string; }; tooltip: {}; } | { ...; })[]; }' is not assignable to type 'SeriesOption$1'.
Types of property 'data' are incompatible.
Type '({ value: number; name: string; label: { position: "center"; formatter: string; fontSize: number; fontWeight: number; fontFamily: string; color: string; }; tooltip: {}; } | { value: number; name: string; })[]' is not assignable to type '(OptionDataValueNumeric | OptionDataValueNumeric[] | PieDataItemOption)[]'.
Type '{ value: number; name: string; label: { position: "center"; formatter: string; fontSize: number; fontWeight: number; fontFamily: string; color: string; }; tooltip: {}; } | { value: number; name: string; }' is not assignable to type 'OptionDataValueNumeric | OptionDataValueNumeric[] | PieDataItemOption'.
Type '{ value: number; name: string; label: { position: "center"; formatter: string; fontSize: number; fontWeight: number; fontFamily: string; color: string; }; tooltip: {}; }' is not assignable to type 'OptionDataValueNumeric | OptionDataValueNumeric[] | PieDataItemOption'.
Object literal may only specify known properties, and 'tooltip' does not exist in type 'OptionDataValueNumeric[] | PieDataItemOption'.

Environment

- OS:macOS Sonoma 14
- Browser: Chrome and Firefox
- Framework: Angular

Any additional comments?

I was trying to create a PIE chart with a tooltip on the data series.

[zhangchi0104]

I think the example you have was wrong. It was a modified version from the original example. Instead of having tooltip inside data. it should be in the series object like this

const options = {
  series: [
    {
      name: " ",
      clockwise: true,
      type: "pie",
      radius: ["65%", "100%"],
      center: ["50%", "50%"],
      // should be here 
      tooltip: {
         // your config
      },
      data: [
        {
          value: 500,
          name: "Solana",
          label: {
            position: "center",
            formatter: "",
            fontSize: 22,
            fontWeight: 600,
            fontFamily: "Roboto",
            color: "blue",
          },
          // not here
          // tooltip: {},
        },
        {
          value: 500,
          name: "Tether",
        },
        {
          value: 1000,
          name: "Golem",
        },
      ],
    },
  ],
};

[fireflysemantics]

Hi @zhangchi0104 - The documentation does include tooltip as an option within the data object.

https://echarts.apache.org/en/option.html#series-pie.data.tooltip

Thoughts?

[helgasoft]

A very cautious opinion since I'm not familiar with TypeScript. And a question for the developers. The error says "'tooltip' does not exist in type 'OptionDataValueNumeric[] | PieDataItemOption'". Seems to me that tooltip has never been implemented in pie.data. Shouldn't it be in PieStateOption, since PieDataItemOption extends PieStateOption ? https://github.com/apache/echarts/blob/fd9e62d7fdd88e95ddaf3c371353e8f6ca7d9e6a/src/chart/pie/PieSeries.ts#L59

BTW, same error for scatter.data.tooltip Demo Code

?!?... wow, TS is tricky, despite the errors tooltip works inside data - tooltip: {formatter: 'shows up!'} 🤪

[YangFan17]

same problem v5.5.0