From 7f625530fb9575082185f1369cdfae6e37952e50 Mon Sep 17 00:00:00 2001
From: Marco Liberati <dej611@users.noreply.github.com>
Date: Thu, 17 Jun 2021 10:27:25 +0200
Subject: [PATCH] [Lens] Add some more documentation for dynamic coloring
 (#101369)

Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 docs/user/dashboard/lens.asciidoc             | 19 +++++++++++++++++
 .../coloring/palette_configuration.tsx        | 21 ++++++++++++++++---
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/docs/user/dashboard/lens.asciidoc b/docs/user/dashboard/lens.asciidoc
index 7927489c596d..4ecfcc925012 100644
--- a/docs/user/dashboard/lens.asciidoc
+++ b/docs/user/dashboard/lens.asciidoc
@@ -315,3 +315,22 @@ Pagination in a data table is unsupported in *Lens*. However, the <<types-of-vis
 ===== Is it possible to have more than one y-axis scale in visualizations?
 
 *Lens* lets you pick, for each Y dimension, up to two distinct axis: *left* and *right*. Each axis can have a different scale.
+
+[float]
+[[why-is-my-value-with-the-right-color-using-value-based-coloring]]
+===== Why is my value with the incorrect color when using value-based coloring?
+
+There could be various reasons for a specific value in the table to have a different color than expected.
+
+Here's a short list of few different aspects to check:
+* Make sure the value falls within the desired color stop value defined in the panel. Color stop values are "inclusive".
+
+* Make sure you have the right value precision setup: value formatters could round the numeric values up or down.
+
+* Make sure the right color continuity option is selected: if the number is below the first color stop value, a continuity of type `Below` or `Above and below range` is required.
+
+* The default values set by the Value type are based on the current data range displayed on the data table.
+
+** If a custom `Number` configuration is used, check that the color stop values are covering the current data range.
+
+** If a `Percent` configuration is used, and the data range changes, the colors displayed are affected.
diff --git a/x-pack/plugins/lens/public/shared_components/coloring/palette_configuration.tsx b/x-pack/plugins/lens/public/shared_components/coloring/palette_configuration.tsx
index df01b3e57cd7..f71bda986a8b 100644
--- a/x-pack/plugins/lens/public/shared_components/coloring/palette_configuration.tsx
+++ b/x-pack/plugins/lens/public/shared_components/coloring/palette_configuration.tsx
@@ -115,9 +115,24 @@ export function CustomizablePalette({
           />
         </EuiFormRow>
         <EuiFormRow
-          label={i18n.translate('xpack.lens.table.dynamicColoring.continuity.label', {
-            defaultMessage: 'Color continuity',
-          })}
+          label={
+            <>
+              {i18n.translate('xpack.lens.table.dynamicColoring.continuity.label', {
+                defaultMessage: 'Color continuity',
+              })}{' '}
+              <EuiIconTip
+                content={i18n.translate(
+                  'xpack.lens.table.dynamicColoring.customPalette.continuityHelp',
+                  {
+                    defaultMessage:
+                      'Specify how colors appear before the first color stop, and after the last color stop.',
+                  }
+                )}
+                position="top"
+                size="s"
+              />
+            </>
+          }
           display="rowCompressed"
         >
           <EuiSuperSelect