Skip to content

Commit d57cf44

Browse files
draft
1 parent 956cacc commit d57cf44

File tree

1 file changed

+81
-3
lines changed

1 file changed

+81
-3
lines changed

explore-analyze/visualize/lens.md

Lines changed: 81 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -104,13 +104,91 @@ Tables are highly customizable, and provide you with text alignment, value forma
104104

105105

106106

107-
#### Assign colors to terms [assign-colors-to-terms]
107+
### Assign colors to terms [assign-colors-to-terms]
108+
```{applies_to}
109+
stack: preview 9.0, ga 9.1
110+
serverless: ga
111+
```
108112

109-
::::{warning}
110-
This functionality is in technical preview and may be changed or removed in a future release. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features.
113+
Color mapping allows you to assign specific colors to categorical terms and dimensions in your visualizations. This feature dramatically reduces the time needed to create custom visualizations and helps maintain consistent color schemes across dashboards.
114+
115+
#### Why use color mapping
116+
117+
Color mapping addresses several key visualization challenges:
118+
119+
* **Visual recognition and recall** — Maintains a static link between colors and terms, independent of filters, queries, and sorting
120+
* **Semantic meaning** — Provides semantic hints through color coding (such as using specific colors for info, error, warning, and success states)
121+
* **Brand consistency** — Enables alignment with brand colors and improves overall aesthetic consistency
122+
* **Time efficiency** — Reduces what previously took "minutes and minutes" to a quick and simple process
123+
124+
#### Supported visualization types
125+
126+
Color mapping is available for the following Lens visualization types:
127+
128+
**Data tables**
129+
: Assign colors to terms in **Rows** or **Metrics** fields. You can apply colors to cell backgrounds or text.
130+
131+
**XY charts (Area, Bar, Line)**
132+
: Assign colors to breakdown dimensions that split your data into multiple series.
133+
134+
**Partition charts (Pie, Donut, Treemap)**
135+
: Assign colors to the main slice or group-by dimension that defines the chart segments.
136+
137+
**Tag clouds**
138+
: Assign colors to the tags dimension that determines the terms displayed in the cloud.
139+
140+
#### Configure color mapping
141+
142+
To assign colors to terms in your visualization:
143+
144+
1. Create a visualization using one of the supported types.
145+
2. Add a categorical field that contains the terms you want to color.
146+
3. In the field configuration, look for the **Color by value** option:
147+
* For data tables: Select **Cell** or **Text**
148+
* For other chart types: This option appears when you have a categorical breakdown
149+
4. Click the **Edit colors** icon.
150+
5. Toggle the button to use the **Color Mapping** feature.
151+
6. Select a color palette and mode from the available options:
152+
* **Classic** — The traditional Elastic charts palette
153+
* **Elastic Brand** — Updated brand colors
154+
* **Legacy** — Previous color scheme for backward compatibility
155+
7. Choose your coloring approach:
156+
* **Individual assignments** — Click **Add assignment** to assign a color to a specific term
157+
* **Bulk assignments** — Click **Add all unassigned terms** to assign colors to all terms automatically
158+
* **Multi-term assignments** — Assign the same color to multiple series to emphasize or de-emphasize groups
159+
8. Configure how unassigned terms should be handled by selecting whether they should be mapped to the selected color palette or a single color.
160+
161+
::::{note}
162+
Assigning colors to date fields is not supported. Color mapping works best with categorical and text-based fields.
111163
::::
112164

165+
#### Color options and accessibility
166+
167+
**Discrete colors and gradients**
168+
: Choose from discrete color sets or generate sequential or divergent gradients. Gradients work well for Likert scales and other term scales.
169+
170+
**Theme-aware neutral colors**
171+
: Use neutral gray colors that automatically adapt to light and dark themes while preserving contrast ratios. These colors are ideal for de-emphasizing or hiding elements.
172+
173+
**Accessibility warnings**
174+
: The system automatically checks color contrast against both light and dark theme backgrounds and displays warnings for low-contrast combinations to ensure accessibility compliance.
175+
176+
#### Best practices
177+
178+
**Maintain consistency**
179+
: Use color mapping to create consistent color schemes when the same categorical data appears across multiple visualizations in your dashboards.
180+
181+
**Use semantic colors**
182+
: Leverage color associations that users already understand (such as red for errors, green for success) to make your visualizations more intuitive.
183+
184+
**Consider performance**
185+
: Color mapping works best with fields that have a reasonable number of distinct values. Fields with hundreds or thousands of unique terms may impact visualization performance.
186+
187+
**Plan for themes**
188+
: When choosing colors, consider how they will appear in both light and dark themes. Use theme-aware neutral colors when you want to de-emphasize data.
189+
113190

191+
#### Previous doc
114192
For term-based metrics, assign a color to each term with color mapping.
115193

116194
1. Create a custom table.

0 commit comments

Comments
 (0)