Runtime error on PIE chart on "other"

[andreaci]

Bug description

Creating a new PIE CHART in a dashboard, with the "other" grouping, will cause an error on the tooltip.

To replicate it, create a new pie chart with the "other" group:

Hover with the mouse on the "other" slice, after a second it will give you this error:

Uncaught runtime errors:

×
ERROR
Cannot set properties of null (setting 'innerHTML')
TypeError: Cannot set properties of null (setting 'innerHTML')
    at TooltipHTMLContent.setContent (webpack-internal:///./node_modules/echarts/lib/component/tooltip/TooltipHTMLContent.js:321:20)
    at TooltipView._showTooltipContent (webpack-internal:///./node_modules/echarts/lib/component/tooltip/TooltipView.js:599:20)
    at TooltipView.eval (webpack-internal:///./node_modules/echarts/lib/component/tooltip/TooltipView.js:491:12)
    at TooltipView._showOrMove (webpack-internal:///./node_modules/echarts/lib/component/tooltip/TooltipView.js:370:60)
    at TooltipView._showSeriesItemTooltip (webpack-internal:///./node_modules/echarts/lib/component/tooltip/TooltipView.js:490:10)
    at TooltipView._tryShow (webpack-internal:///./node_modules/echarts/lib/component/tooltip/TooltipView.js:351:14)
    at TooltipView.manuallyShowTip (webpack-internal:///./node_modules/echarts/lib/component/tooltip/TooltipView.js:271:12)
    at eval (webpack-internal:///./node_modules/echarts/lib/component/tooltip/TooltipView.js:176:37)

I can replicate it also on the default sample data, changing one chart to show the "other" slice

Screenshots/recordings

Superset version

master / latest-dev

Python version

3.9

Node version

16

Browser

Chrome

Additional context

• Installation with docker, standard "docker compose up" with default file.

Checklist

• I have searched Superset docs and Slack and didn't find a solution to my problem.
• I have searched the GitHub issue tracker and didn't find a similar bug report.
• I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

[dosubot]

Hi @andreaci! I'm Dosu and I’m helping the superset team.

This error isn't tracked in Superset issues or recent PRs, and it's likely caused by an ECharts DOM handling bug triggered by the synthetic "other" slice in the pie chart. Superset's code aggregates small slices into "other" and generates tooltip HTML for it, but the runtime error ("Cannot set properties of null (setting 'innerHTML')") suggests ECharts can't find the tooltip DOM element when rendering for "other"—possibly due to timing or an edge case in how the tooltip content is built or displayed [source].

A practical workaround is to customize the tooltip formatter for the pie chart so that, for the "other" slice, it returns a simple string instead of HTML. For example, in transformProps.ts, you can change the formatter to:

formatter: (params) => {
  if (params?.data?.isOther) {
    return `${params.name}: ${params.value}`;
  }
  // default formatting for other slices
}

Users have reported that this approach can mitigate display problems for tooltips [source]. If this doesn't resolve the runtime error, consider reporting the bug upstream to ECharts, as the issue appears to be in their tooltip internals rather than Superset's code.

If you want to experiment further, the relevant code for tooltip formatting and "other" group handling is in superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts and superset-frontend/packages/superset-ui-core/src/utils/tooltip.ts [source].

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[msyavuz]

Hey, nice catch! Dosu seems to be pointing to right files for a fix. Do you intend to open a pr to fix this? I am happy to help review push it through if you decide to do so.

[cbum-dev]

Hi @msyavuz for me the error is not with hover but occurring while clicking on other group.

Hovering is just fine.

However I have fixed this issue and making a PR for this