GitHub user dosubot[bot] added a comment to the discussion: Labels are not 
displayed correctly in version 5.0

<!-- Answer -->
This is a known issue in Superset 5.0.0: tooltips in Pie Charts often show the 
internal metric name instead of your saved metric label, and the value and 
percentage are concatenated without spaces, making them hard to read. This 
happens because the tooltip formatter in the code pulls the label differently 
for saved vs. ad hoc metrics, and the default formatter doesn't add separators 
between values.

There isn't a UI setting to fix this in 5.0.0. The issue was caused by a 
frontend XSS filter that stripped whitespace and styles from tooltips. It has 
been fixed in the main branch and will be included in the next release after 
5.0.0 ([details and 
workaround](https://github.com/apache/superset/issues/34198)). As a temporary 
workaround, you can add custom CSS to your dashboard to improve spacing:

```css
table * {
  padding: 5px;
}
```

If you need an immediate code-based fix, you can customize the tooltip 
formatter in 
`superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts` to 
format the tooltip string with spaces and punctuation, for example:

```js
formatter: (params) => {
  const [name, formattedValue, formattedPercent] = parseParams({ params, 
numberFormatter, sanitizeName: true });
  return `${name} ${formattedValue}, ${formattedPercent}`;
}
```
This will separate the label, value, and percentage for better readability 
([reference](https://github.com/apache/superset/issues/33913)).

For the label issue: saved metrics rely on the `verbose_name` or `label` field. 
If those aren't set or referenced correctly, Superset falls back to the 
internal name. Ad hoc metrics use the label you provide in the chart, so they 
display as expected 
([reference](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/utils.ts)).
 Double-check your saved metric's `verbose_name` in the dataset.

If you upgrade to a version after 5.0.0, the tooltip formatting should be fixed 
automatically. For now, the above workarounds are your best options.


<!-- Dosu Comment Footer -->
*To reply, just mention [@dosu](https://go.dosu.dev/dosubot).*

---
<sup>How did I do? 
[Good](https://app.dosu.dev/response-feedback/71c695d3-ff57-41c4-86c6-331d79c68336?feedback_type=great_response)
 | 
[Irrelevant](https://app.dosu.dev/response-feedback/71c695d3-ff57-41c4-86c6-331d79c68336?feedback_type=irrelevant_answer)
 | 
[Incorrect](https://app.dosu.dev/response-feedback/71c695d3-ff57-41c4-86c6-331d79c68336?feedback_type=incorrect_sources)
 | 
[Verbose](https://app.dosu.dev/response-feedback/71c695d3-ff57-41c4-86c6-331d79c68336?feedback_type=too_verbose)
 | 
[Hallucination](https://app.dosu.dev/response-feedback/71c695d3-ff57-41c4-86c6-331d79c68336?feedback_type=hallucination)
 | [Report 
🐛](https://app.dosu.dev/response-feedback/71c695d3-ff57-41c4-86c6-331d79c68336?feedback_type=bug_report)
 | 
[Other](https://app.dosu.dev/response-feedback/71c695d3-ff57-41c4-86c6-331d79c68336?feedback_type=other)</sup>&nbsp;&nbsp;[![Chat
 with 
Dosu](https://dosu.dev/dosu-chat-badge.svg)](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github)&
 nbsp;[![Join 
Discord](https://img.shields.io/badge/join-5865F2?logo=discord&logoColor=white&label=)](https://go.dosu.dev/discord-bot)&nbsp;[![Share
 on 
X](https://img.shields.io/badge/X-share-black)](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/discussions/35862)

GitHub link: 
https://github.com/apache/superset/discussions/35862#discussioncomment-14796579

----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to: 
[email protected]


---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to