dosubot[bot] commented on issue #31864:
URL: https://github.com/apache/superset/issues/31864#issuecomment-2592056637
<!-- Answer -->
To display the full name of a product on hover in a stacked bar chart while
using a short name for the axis/label, you can customize the tooltip
functionality. Here's a basic approach:
1. Ensure your data includes both the short name (for the axis/label) and
the full name (for the tooltip).
2. Modify the tooltip generation function to use the full name for the
tooltip content.
For example, you can adjust the `generateCompareTooltipContent` function to
include the full name:
```js
export function generateCompareTooltipContent(d, valueFormatter,
fullNameMap) {
let tooltip = '';
tooltip +=
"<table><thead><tr><td colspan='3'>" +
`<strong class='x-value'>${d.value}</strong>` +
'</td></tr></thead><tbody>';
d.series.sort((a, b) => (a.value >= b.value ? -1 : 1));
d.series.forEach(series => {
const key = getFormattedKey(series.key, true);
const fullName = fullNameMap[series.key] || key; // Use full name if
available
tooltip +=
`<tr class="${series.highlight ? 'emph' : ''}">` +
`<td class='legend-color-guide' style="opacity: ${
series.highlight ? '1' : '0.75'
};"">` +
'<div ' +
`style="border: 2px solid ${
series.highlight ? 'black' : 'transparent'
}; background-color: ${series.color};"` +
'></div>' +
'</td>' +
`<td>${fullName}</td>` + // Display full name in tooltip
`<td>${valueFormatter(series.value)}</td>` +
'</tr>';
});
tooltip += '</tbody></table>';
return dompurify.sanitize(tooltip);
}
```
In this example, `fullNameMap` is an object mapping short names to full
names. You would pass this map to the `generateCompareTooltipContent` function
when generating the tooltip content. This way, the axis/label can display the
short name, while the tooltip shows the full name on hover
<sup>[[1]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/legacy-preset-chart-nvd3/src/utils.js)</sup>.
<!-- Dosu Comment Footer -->
*To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
---
<sup>Help Dosu learn! Give it feedback: [Great
Response](https://app.dosu.dev/response-feedback/939a6c71-32a4-45ff-a87e-315a5e97e0ed?feedback_type=great_response)
| [Irrelevant
Answer](https://app.dosu.dev/response-feedback/939a6c71-32a4-45ff-a87e-315a5e97e0ed?feedback_type=irrelevant_answer)
| [Incorrect
Sources](https://app.dosu.dev/response-feedback/939a6c71-32a4-45ff-a87e-315a5e97e0ed?feedback_type=incorrect_sources)
| [Too
Verbose](https://app.dosu.dev/response-feedback/939a6c71-32a4-45ff-a87e-315a5e97e0ed?feedback_type=too_verbose)
|
[Hallucination](https://app.dosu.dev/response-feedback/939a6c71-32a4-45ff-a87e-315a5e97e0ed?feedback_type=hallucination)
|
[Other](https://app.dosu.dev/response-feedback/939a6c71-32a4-45ff-a87e-315a5e97e0ed?feedback_type=other)</sup>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
