Re: [PR] fix(echarts): Series labels hard to read in dark mode [superset]

Fri, 22 Aug 2025 02:23:55 -0700 


korbit-ai[bot] commented on code in PR #34815:
URL: https://github.com/apache/superset/pull/34815#discussion_r2293195916


##########
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts:
##########
@@ -323,6 +325,8 @@ export function transformSeries(
     label: {
       show: !!showValue,
       position: isHorizontal ? 'right' : 'top',
+      color: theme?.colorText,
+      textBorderWidth: 0,

Review Comment:
   ### Label readability not fully addressed <sub>![category 
Functionality](https://img.shields.io/badge/Functionality-0284c7)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   Setting textBorderWidth to 0 without implementing a background color could 
still result in readability issues when label text overlaps with dark-colored 
series.
   
   
   ###### Why this matters
   Labels may become unreadable when they overlap with dark-colored series in 
both light and dark modes due to lack of text contrast.
   
   ###### Suggested change ∙ *Feature Preview*
   Add a text background for better contrast in both light and dark modes:
   ```typescript
   label: {
     show: !!showValue,
     position: isHorizontal ? 'right' : 'top',
     color: theme?.colorText,
     backgroundColor: theme?.colorBgElevated,
     padding: [2, 4],
     textBorderWidth: 0,
   ```
   
   
   ###### Provide feedback to improve future suggestions
   [![Nice 
Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/70b5512c-e712-4ef9-bd6d-3c382356b91d/upvote)
 
[![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/70b5512c-e712-4ef9-bd6d-3c382356b91d?what_not_true=true)
  [![Not in 
Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/70b5512c-e712-4ef9-bd6d-3c382356b91d?what_out_of_scope=true)
 [![Not in coding 
standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/70b5512c-e712-4ef9-bd6d-3c382356b91d?what_not_in_standard=true)
 
[![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/70b5512c-e712-4ef9-bd6d-3c382356b91d)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:63fb06bb-e8bf-41e7-8514-9eae57c630ed -->
   
   
   [](63fb06bb-e8bf-41e7-8514-9eae57c630ed)



-- 
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]

Reply via email to