[7.x] [Lens] Fix Treemap outer labels with transparent background (#8…

…4245) (#84467)
elastic · Nov 30, 2020 · 1311372 · 1311372
1 parent f2833fc
commit 1311372
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/x-pack/plugins/lens/public/pie_visualization/render_function.tsx b/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
@@ -68,6 +68,7 @@ export function PieComponent(
   } = props.args;
   const chartTheme = chartsThemeService.useChartsTheme();
   const chartBaseTheme = chartsThemeService.useChartsBaseTheme();
+  const isDarkMode = chartsThemeService.useDarkMode();
 
   if (!hideLabels) {
     firstTable.columns.forEach((column) => {
@@ -128,7 +129,9 @@ export function PieComponent(
           if (shape === 'treemap') {
             // Only highlight the innermost color of the treemap, as it accurately represents area
             if (layerIndex < bucketColumns.length - 1) {
-              return 'rgba(0,0,0,0)';
+              // Mind the difference here: the contrast computation for the text ignores the alpha/opacity
+              // therefore change it for dask mode
+              return isDarkMode ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0)';
             }
             // only use the top level series layer for coloring
             if (seriesLayers.length > 1) {
@@ -263,6 +266,7 @@ export function PieComponent(
           theme={{
             ...chartTheme,
             background: {
+              ...chartTheme.background,
               color: undefined, // removes background for embeddables
             },
           }}