Labels are not displayed correctly in version 5.0

[tsator]

Since updating Superset to version 5.0, the labels of some charts, such as the Pie Chart, are displayed in a manner that is difficult for the end user to read.

The variable name (not the label), the amount, and the percentage are displayed all at once without spaces. This makes the chart difficult for a non-technical person to understand.

How can I configure this so that it displays correctly again?

[dosubot[bot]]

In Superset 5.0, Pie/Donut chart label formatting is controlled by the Label Type setting. To fix the issue where labels are concatenated without spaces, open your chart's configuration panel and look for the "Label Type" option. Set it to "key_value_percent" for readable labels like Category: Value (Percent), or choose "template" and enter a custom format such as {name}: {value} ({percent}) in the "Label Template" field. This will separate the variable name, value, and percentage with spaces and punctuation, making the chart much easier to read for end users. You can find more details about these options in the Pie chart control panel documentation and see how the label formatting works in the chart code.

If you still see formatting issues after adjusting these settings, it may be due to a regression or bug introduced in 5.0, but most cases are resolved by updating the label configuration as described above.

To reply, just mention @dosu.

---

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

[dosubot[bot]]

The issue with saved metric labels not appearing in Pie Chart tooltips—while ad hoc metric labels do—is due to how Superset retrieves and displays metric labels. For saved metrics, the tooltip tries to use the verbose_name or metric_name, but if the label isn't set or isn't properly referenced, it may fall back to the internal name instead of your custom label. Ad hoc metrics (defined directly in the chart) use the label you provide, so they display as expected. You can see this logic in the code that handles metric label retrieval and tooltip rendering [source].

For the concatenation of quantity and percentage in the tooltip, this is a known formatting issue. The tooltip formatter by default may concatenate these values without spaces or punctuation. You can improve readability by customizing the tooltip formatter in the Pie Chart plugin code. For example, you can change the formatter function in transformProps.ts to format the tooltip string with spaces and commas, or even remove the percentage if you don't want it shown [source]. Here’s a suggested change:

// Instead of:
const [name, formattedValue, formattedPercent] = parseParams({ ... });
return tooltipHtml([[metricLabel, formattedValue, formattedPercent]], name);

// Use:
const [name, formattedValue, formattedPercent] = parseParams({ ... });
return `${name} ${formattedValue}, ${formattedPercent}`;
// Or, to remove the percent:
const [name, formattedValue] = parseParams({ ... });
return tooltipHtml([[metricLabel, formattedValue]], name);

If you want to ensure your saved metric label appears, double-check that the metric's verbose_name or label is set in the dataset, and that your Superset version includes recent fixes for tooltip formatting [source]. If you’re comfortable editing code, the above formatter tweak will give you full control over the tooltip display.

To reply, just mention @dosu.

---

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

[tsator]

Hi, @dosu
The chart's Label type configuration works fine. What's not clear is that when I hover over a category in the Pie Chart, it displays incorrectly.

The label I defined in my saved metric isn't displayed. However, if I define the metric within the chart (i.e., not save it in the dataset) and give it a custom name, it displays correctly.

However, the quantity and percentage are still displayed together, which can be confusing for the end user.

[dosubot[bot]]

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). As a temporary workaround, you can add custom CSS to your dashboard to improve spacing:

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:

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

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

To reply, just mention @dosu.

---

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