dosubot[bot] commented on issue #37170: URL: https://github.com/apache/superset/issues/37170#issuecomment-3755591473
<!-- Greeting --> Hi @jmartinmendev-source! I'm [Dosu](https://go.dosu.dev/dosubot) and I’m helping the superset team. <!-- Answer --> The root cause is that the Sunburst Chart’s “Show Total” text uses ECharts’ `graphic` property with no color specified, so it defaults to black regardless of theme. The chart’s transformProps function receives the current theme and uses theme tokens for other labels, but not for the center total text. To fix this, update the `graphic` style to include a color property using `theme.colorText` (which adapts to light/dark mode). For example: ```js graphic: showTotal ? { type: 'text', top: 'center', left: 'center', style: { text: t('Total: %s', primaryValueFormatter(totalValue)), fontSize: 16, fontWeight: 'bold', color: theme.colorText, // Add this line for theme-aware color }, z: 10, } : null, ``` This will ensure the “Show Total” text is visible in both light and dark modes, matching how other chart labels adapt to the theme. Theme tokens are already available in the transformProps context, so this change is straightforward to implement. [Reference: transformProps.ts](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts#L158-L402) <!-- 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/18e73bbb-149d-4f2d-8b43-2b5c82cc316f?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/18e73bbb-149d-4f2d-8b43-2b5c82cc316f?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/18e73bbb-149d-4f2d-8b43-2b5c82cc316f?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/18e73bbb-149d-4f2d-8b43-2b5c82cc316f?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/18e73bbb-149d-4f2d-8b43-2b5c82cc316f?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/18e73bbb-149d-4f2d-8b43-2b5c82cc316f?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/18e73bbb-149d-4f2d-8b43-2b5c82cc316f?feedback_type=other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=The%20root%20cause%20is%20that%20the%20Sunburst%20Chart%E2%80%99s%20%E2%80%9CShow%20Total%E2%80%9D%20text%20uses%20ECharts%E2%80%99%20%60graphic%60%20property%20with%20no%20color%20specified%2C%20so%20it%20defaults%20to%20black%20regardless%20of%20theme.%20The%20chart%E2%80%99s%20transformProps%20function%20receives%20the%20current%20theme%20and%20uses%20theme%20tokens%20for%20other%20labels%2C%20but%20not%20for%20the%20center%20total%20text.%20To%20fix%20this%2C%20update%20the%20%60graphic%60%20style%20to%20include%20a%20color%20property%20using%20%60theme.colorText%60%20%28which%20adapts%20to%20light/dark%20mode%29.%20For%20example%3A%0A%0A%60%60%60js%0Agraphic%3A%20showTotal%0A%20%20%3F%20%7B%0A%20%20%20%20%20%20type%3A%20%27text%27%2C%0A%20%20% 20%20%20%20top%3A%20%27center%27%2C%0A%20%20%20%20%20%20left%3A%20%27center%27%2C%0A%20%20%20%20%20%20style%3A%20%7B%0A%20%20%20%20%20%20%20%20text%3A%20t%28%27Total%3A%20%25s%27%2C%20primaryValueFormatter%28totalValue%29%29%2C%0A%20%20%20%20%20%20%20%20fontSize%3A%2016%2C%0A%20%20%20%20%20%20%20%20fontWeight%3A%20%27bold%27%2C%0A%20%20%20%20%20%20%20%20color%3A%20theme.colorText%2C%20//%20Add%20this%20line%20for%20theme-aware%20color%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20z%3A%2010%2C%0A%20%20%20%20%7D%0A%20%20%3A%20null%2C%0A%60%60%60%0A%0AThis%20will%20ensure%20the%20%E2%80%9CShow%20Total%E2%80%9D%20text%20is%20visible%20in%20both%20light%20and%20dark%20modes%2C%20matching%20how%20other%20chart%20labels%20adapt%20to%20the%20theme.%20Theme%20tokens%20are%20already%20available%20in%20the%20transformProps%20context%2C%20so%20this%20change%20is%20straightforward%20to%20implement.%20%20%0A%5BReference%3A%20transformProps.ts%5D%28https%3A//github.com/apache/superset/blob/829e4d 92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts%23L158-L402%29) [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/issues/37170) -- 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]
