elastic / elastic/docs-content
Choose solid or gradient fills for Lens area charts
- 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

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