fix: restrict custom data label colors (#10205)

DiegoCardoso · web-flow · commit 1d272108d9b3 · 2025-09-22T14:57:47.000+02:00
To ensure a good contrast between the background color of a series and its data label color, a custom color is calculated and set to the data labels. That works well for some types of charts where the labels are placed within an area colored by the series color, like for Organization, Gantt, and Treemap. For other types, however, it can lead to unexpected results, when the data labels are placed in an area covered by the chart's background, when `useHTML` is used. This change restricts the setting of these custom colors to the types mentioned above, where they are expected to work well. Fixes #9988
diff --git a/packages/charts/src/styles/vaadin-chart-base-styles.js b/packages/charts/src/styles/vaadin-chart-base-styles.js
@@ -359,100 +359,110 @@ export const chartStyles = css`
   :where([styled-mode]) .highcharts-color-0 {
     fill: var(--_color-0);
     stroke: var(--_color-0);
-    color: var(--_color-0-label);
   }
 
   :where([styled-mode]) .highcharts-color-1 {
     fill: var(--_color-1);
     stroke: var(--_color-1);
-    color: var(--_color-1-label);
   }
 
   :where([styled-mode]) .highcharts-color-2 {
     fill: var(--_color-2);
     stroke: var(--_color-2);
-    color: var(--_color-2-label);
   }
 
   :where([styled-mode]) .highcharts-color-3 {
     fill: var(--_color-3);
     stroke: var(--_color-3);
-    color: var(--_color-2-label);
   }
 
   :where([styled-mode]) .highcharts-color-4 {
     fill: var(--_color-4);
     stroke: var(--_color-4);
-    color: var(--_color-4-label);
   }
 
   :where([styled-mode]) .highcharts-color-5 {
     fill: var(--_color-5);
     stroke: var(--_color-5);
-    color: var(--_color-5-label);
   }
 
   :where([styled-mode]) .highcharts-color-6 {
     fill: var(--_color-6);
     stroke: var(--_color-6);
-    color: var(--_color-6-label);
   }
 
   :where([styled-mode]) .highcharts-color-7 {
     fill: var(--_color-7);
-    stroke: var(--_color-7);
     color: var(--_color-7-label);
   }
 
   :where([styled-mode]) .highcharts-color-8 {
     fill: var(--_color-8);
     stroke: var(--_color-8);
-    color: var(--_color-8-label);
   }
 
   :where([styled-mode]) .highcharts-color-9 {
     fill: var(--_color-9);
     stroke: var(--_color-9);
-    color: var(--_color-9-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-0 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-0 {
     color: var(--_color-0-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-1 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-1 {
     color: var(--_color-1-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-2 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-2 {
     color: var(--_color-2-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-3 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-3 {
     color: var(--_color-3-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-4 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-4 {
     color: var(--_color-4-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-5 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-5 {
     color: var(--_color-5-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-6 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-6 {
     color: var(--_color-6-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-7 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-7 {
     color: var(--_color-7-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-8 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-8 {
     color: var(--_color-8-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-9 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-9 {
     color: var(--_color-9-label);
   }
 
