Adding a tooltip configuration to a pie chart data item in ECharts?

91 views Asked by At

Trying to add a tooltip property to a data item in this pie chart (Stackblitz Demo).

This is the entire options configuration.

    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',
            },
          ],
        },
      ],
    };
  }

The ECharts documentation indicates that it should be possible.

However the demo gives the following error.

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'.

If I change the options from using the EChartsOption typedlike this:

  options!: EChartsOption;

To this:

  options!: any

Then the demo compiles so I'm trying to figure out whether the documentation is wrong, or the EChartsOption type is wrong, or whether there is something else that I'm missing?

0

There are 0 answers