dosubot[bot] commented on issue #36967:
URL: https://github.com/apache/superset/issues/36967#issuecomment-3721884827
<!-- Answer -->
The tooltip and highlight styling for the Calendar Chart actually use theme
grayscale tokens, not the Ant Design tokens you mentioned. In the Light theme,
the tooltip background should be a dark gray and the text a very light gray,
which normally provides good contrast. If you’re seeing white-on-white, it’s
likely your theme’s grayscale tokens have been customized or overridden so that
both dark2 and light5 are very light colors, or there’s a CSS specificity issue
overriding the intended styles. You can fix this by adding a custom CSS rule
like:
```css
.superset-legacy-chart-calendar .d3-tip {
background: #222 !important;
color: #fff !important;
}
```
Place this in your dashboard’s custom CSS or in your deployment’s global
stylesheet. This will ensure the tooltip is always readable regardless of theme
settings.
For the persistent hover highlight, the CalHeatMap library manages
highlights by adding a .highlight class to cells, but doesn’t always remove it
on mouseout. You can work around this by adding a CSS rule to hide or reset the
highlight, or by ensuring the highlight array passed to the chart is empty
unless you want a cell to stay highlighted. There’s no direct configuration or
event hook for this, so CSS overrides are the most practical solution for now.
No code changes are required in the chart logic or CalHeatMap itself—these
issues can be addressed with targeted CSS or by adjusting your theme tokens if
you have control over them.
References:
[Tooltip and highlight styling in
ReactCalendar.jsx](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/legacy-plugin-chart-calendar/src/ReactCalendar.jsx#L26-L221)
[Theme token
computation](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-core/src/theme/utils.ts#L121-L175)
[CalHeatMap tooltip and highlight
logic](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/cal-heatmap.js#L21-L2271)
<!-- 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/64b2639c-c320-4add-9635-45cd87cda5cf?feedback_type=great_response)
|
[Irrelevant](https://app.dosu.dev/response-feedback/64b2639c-c320-4add-9635-45cd87cda5cf?feedback_type=irrelevant_answer)
|
[Incorrect](https://app.dosu.dev/response-feedback/64b2639c-c320-4add-9635-45cd87cda5cf?feedback_type=incorrect_sources)
|
[Verbose](https://app.dosu.dev/response-feedback/64b2639c-c320-4add-9635-45cd87cda5cf?feedback_type=too_verbose)
|
[Hallucination](https://app.dosu.dev/response-feedback/64b2639c-c320-4add-9635-45cd87cda5cf?feedback_type=hallucination)
| [Report
🐛](https://app.dosu.dev/response-feedback/64b2639c-c320-4add-9635-45cd87cda5cf?feedback_type=bug_report)
|
[Other](https://app.dosu.dev/response-feedback/64b2639c-c320-4add-9635-45cd87cda5cf?feedback_type=other)</sup>
[](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=The%20tooltip%20and%20highlight%20styling%20for%20the%20Calendar%20Chart%20actually%20use%20theme%20grayscale%20tokens%2C%20not%20the%20Ant%20Design%20tokens%20you%20mentioned.%20In%20the%20Light%20theme%2C%20the%20tooltip%20background%20should%20be%20a%20dark%20gray%20and%20the%20text%20a%20very%20light%20gray%2C%20which%20normally%20provides%20good%20contrast.%20If%20you%E2%80%99re%20seeing%20white-on-white%2C%20it%E2%80%99s%20likely%20your%20theme%E2%80%99s%20grayscale%20tokens%20have%20been%20customized%20or%20overridden%20so%20that%20both%20dark2%20and%20light5%20are%20very%20light%20colors%2C%20or%20there%E2%80%99s%20a%20CSS%20specificity%20issue%20overriding%20the%20intended%20styles.%20You%20can%20fix%20this%20by%20adding%20a%20custom%20CSS
%20rule%20like%3A%0A%0A%60%60%60css%0A.superset-legacy-chart-calendar%20.d3-tip%20%7B%0A%20%20background%3A%20%23222%20%21important%3B%0A%20%20color%3A%20%23fff%20%21important%3B%0A%7D%0A%60%60%60%0A%0APlace%20this%20in%20your%20dashboard%E2%80%99s%20custom%20CSS%20or%20in%20your%20deployment%E2%80%99s%20global%20stylesheet.%20This%20will%20ensure%20the%20tooltip%20is%20always%20readable%20regardless%20of%20theme%20settings.%0A%0AFor%20the%20persistent%20hover%20highlight%2C%20the%20CalHeatMap%20library%20manages%20highlights%20by%20adding%20a%20.highlight%20class%20to%20cells%2C%20but%20doesn%E2%80%99t%20always%20remove%20it%20on%20mouseout.%20You%20can%20work%20around%20this%20by%20adding%20a%20CSS%20rule%20to%20hide%20or%20reset%20the%20highlight%2C%20or%20by%20ensuring%20the%20highlight%20array%20passed%20to%20the%20chart%20is%20empty%20unless%20you%20want%20a%20cell%20to%20stay%20highlighted.%20There%E2%80%99s%20no%20direct%20configuration%20or%20event%20hook%20for%20this%2C%20
so%20CSS%20overrides%20are%20the%20most%20practical%20solution%20for%20now.%0A%0ANo%20code%20changes%20are%20required%20in%20the%20chart%20logic%20or%20CalHeatMap%20itself%E2%80%94these%20issues%20can%20be%20addressed%20with%20targeted%20CSS%20or%20by%20adjusting%20your%20theme%20tokens%20if%20you%20have%20control%20over%20them.%20%0A%0AReferences%3A%20%20%0A%5BTooltip%20and%20highlight%20styling%20in%20ReactCalendar.jsx%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/legacy-plugin-chart-calendar/src/ReactCalendar.jsx%23L26-L221%29%20%20%0A%5BTheme%20token%20computation%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-core/src/theme/utils.ts%23L121-L175%29%20%20%0A%5BCalHeatMap%20tooltip%20and%20highlight%20logic%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/legacy-plugin-ch
art-calendar/src/vendor/cal-heatmap.js%23L21-L2271%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/36967)
--
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]
