elastic / elastic/docs-content

Choose solid or gradient fills for Lens area charts

Open
#7,950 1 comment 0 reactions 1 assignee Claimed by @florent-leborgne View on GitHub
Feature: Visualizations Team:SKI
Dominant language
No language data
Stars
47
Forks
261
Avg merge
3d 12h
Merged PRs (30d)
116

Description

## Summary

Lens area charts now have a Fill control in the Style panel with Solid and Gradient choices, while Solid remains the default for new and existing Lens charts. The Visualizations API exposes the same choice as `styling.areas.fill`; Kibana also changes the default Vega area mark to a gradient unless a color encoding overrides it with a solid fill.

**Why this needs docs:** The diff adds a visible Lens styling control and changes Vega's default area rendering, but the published area-chart settings and Vega default-theme sections do not describe either behavior.

## Resources

- PR [#277546](https://github.com/elastic/kibana/pull/277546) — [Lens][XY] Add gradient style option to area charts

Screenshots from PR

![screenshot](https://github.com/user-attachments/assets/5250f1f2-3a38-419b-a703-db824d0610c2)

## Availability

| Channel | Details |
|---------|---------|
| **Stack** | v9.6.0 |
| **Serverless** | Aug 17–Aug 21 |
| **Feature flag** | None — active by default |

---
*Created with [Docs Quest Scanner](https://github.com/florent-leborgne/docs-quest-scanner) by @florent-leborgne*

## Suggested edits

[Build area charts with Kibana](https://www.elastic.co/docs/explore-analyze/visualize/charts/area-charts) > Area chart settings > General layout > Style > Appearance
- **What the docs say:** The Appearance list documents area fill opacity, point visibility, and line interpolation, and the API examples set only `styling.areas.fill_opacity`.
- **What to add:** Add the Fill control and its Solid and Gradient options, noting that Solid is the default and existing saved Lens area charts remain solid; also show or explain the matching `styling.areas.fill` property in the page's API coverage. Applies from 9.6.0 and in serverless.

[Custom visualizations with Vega](https://www.elastic.co/docs/explore-analyze/visualize/custom-visualizations-with-vega) > Vega reference > Default theme to match Kibana
- **What the docs say:** The section says Kibana sets a default color for each Vega mark type and that authors can override it with stroke, fill, or color values.
- **What to add:** Clarify that an area mark with no explicit fill now uses Kibana's default gradient, while a Vega or Vega-Lite color encoding takes precedence and renders a solid series color. Applies from 9.6.0 and in serverless.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.