[Lens] Add some more documentation for dynamic coloring (elastic#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

@@ -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.

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