feat(highlight): Add support to configure dimmed (unhighlight) colors for Bar and Partition charts by awahab07 · Pull Request #2774 · elastic/elastic-charts

awahab07 · 2026-01-20T15:47:34Z

Summary

Unhighlighted series in bar and partition charts now display a neutral dimmed color instead of reduced opacity, matching the existing behavior in line and area charts.

When hovering over a legend item or series, unhighlighted elements render with a solid neutral gray color:

Light mode: Shade 15 (#ECF1F9) at 100% opacity
Dark mode: Shade 110 (#384861) at 100% opacity

This provides better visual distinction and consistency across all chart types.

245829_neautral_color_for_unhighlighted_chart_items.mov

Details

Theme Configuration

Added blueGrey110 (#384861) to PRIMITIVE_COLORS and shade110 to SEMANTIC_COLORS in base_colors.ts to align with the latest EUI Borealis palette
Updated LIGHT_DIMMED_COLORS.barFill and arcFill to use solid shade15 (#ECF1F9)
Updated DARK_DIMMED_COLORS.barFill and arcFill to use solid shade110 (#384861)
Default theme uses neutral gray dimmed colors; legacy/amsterdam themes retain opacity-only dimming for backward compatibility

Storybook

Story Stylings -> Dimmed Highlight Style has been added to comprehensively test the feature with ability to switch unhighlight shades.
Other existing stories, helpful to test the chagne:
- Legend -> Piechart
- Interactions -> Sunburst Slice Clicks
- Interactions -> Line Area Bar Point Clicks And Hovers

Issues

Implements the feature required by elastic/kibana#245829.

Checklist

The proper chart type label has been added (e.g. :xy, :partition)
The proper feature labels have been added (e.g. :interactions, :axis)
All related issues have been linked (i.e. closes #123, fixes #123)
New public API exports have been added to packages/charts/src/index.ts
Unit tests have been added or updated to match the most common scenarios
The proper documentation and/or storybook story has been added or updated
The code has been checked for cross-browser compatibility (Chrome, Firefox, Safari, Edge)
Visual changes have been tested with light and dark themes

- Add dimmed property to RectStyle and ArcStyle interfaces - Define barFill and arcFill in LIGHT_DIMMED_COLORS and DARK_DIMMED_COLORS - Implement dimmed.fill color rendering in buildBarStyle function - Use reference equality to detect unhighlighted state (geometryStateStyle === sharedStyle.unhighlighted) - Update all theme variants (light, dark, legacy, amsterdam) with dimmed configurations - Add dimmed opacity (0.25) to legacy and amsterdam themes for consistency - Update bar.test.ts to include sharedStyle parameter - Enhance Storybook stories with more series for testing dimming behavior - Add useDimmedColors control to sunburst story for arc testing - Add TODO comments in partition chart renderer for future arc dimming implementation Subject to visual review and calibration of shade values.

Option B: Hybrid Approach - SVG overlay (HighlighterFromHover) for direct slice hover - Canvas dimming for legend hover (consistent with bar/line/area charts) Implementation: - Add highlightedLegendPath to partition chart canvas renderer props - Pass legend path through rendering pipeline to all three renderers - Calculate highlighted quads using highlightedGeoms utility - Apply dimmed.fill colors in renderSectors and renderRectangles - Remove HighlighterFromLegend component (no longer needed) - Keep HighlighterFromHover for immediate slice hover feedback - Update sunburst story to use theme's default dimmed colors Benefits: - Minimally invasive - no architectural changes to hover highlighting - Consistent dimming behavior across all chart types - Better performance (no SVG overlay for legend interactions) - Single source of truth for legend dimming

… renderers The legend hover wasn't working because: 1. highlightedGeoms needs legendStrategy and flatLegend from settings 2. Dimmed fill color needs to come from theme.arcSeriesStyle, not style.arcSeriesStyle (ShapeViewModel.style is Theme['partition'], not the full theme) Changes: - Add legendStrategy and flatLegend to partition canvas renderer props - Add arcSeriesStyle from theme to props - Pass all three through to renderPartitionCanvas2d and other renderers - Use arcSeriesStyle.arc.dimmed.fill instead of style.arcSeriesStyle - Call highlightedGeoms with proper legendStrategy and flatLegend settings

Added controls to test different shade colors for dimmed/unhighlighted states: 1. New Story: Stylings -> Dimmed Colors (27_dimmed_colors.story.tsx) - Permanent feature for users to configure dimmed colors - Shows mixed chart types (bars + lines + areas with points) - Provides shade selection for all XY chart types 2. Enhanced: Legend -> Piechart (10_sunburst.story.tsx) - Added shade color selector for partition charts - Supports all partition layouts (sunburst, treemap, mosaic, waffle) - Allows testing different opacity levels 3. Enhanced: Interactions -> Bar Clicks (1_bar_clicks.story.tsx) - Added shade color selector for bar charts - Allows comparison with existing series Shade Options: - Light mode: shade30 @ 15% to 50% (default: 35%) - Dark mode: shade60 @ 15% to 50% (default: 35%) - 5% increment intervals for fine-tuning This allows visual review and calibration of dimmed colors across all chart types as mentioned in GitHub issue elastic#2416.

… for testing shade/alpha combinations. The story offers: - Test different shade colors from EUI Borealis palette (shade15-shade145) - Test different alpha/opacity values (10%-100% in 5% increments) - See dimmed effect on both partition charts (sunburst/treemap) and XY charts (bar/line/area) - View real-time info panel showing current dimmed color and hovered series

awahab07 · 2026-01-21T09:26:12Z

buildkite test this

- Fix LegendPath import path (from state/actions/legend) - Fix LegendStrategy import path (from layout/utils/highlighted_geoms) - Add AnimationState import in canvas_renderers - Add proper type guards for dimmed.fill to handle union type - Update Jest snapshots for bar rendering tests

Revert the test-only additions to 1_bar_clicks.story.tsx and 10_sunburst.story.tsx to avoid VRT baseline changes. The dedicated 27_dimmed_highlight_style.story.tsx serves the testing purpose.

awahab07 · 2026-01-21T13:57:13Z

buildkite update vrt

awahab07 · 2026-01-21T18:00:05Z

buildkite test this

delanni · 2026-01-23T10:40:28Z

buildkite build this

gvnmagni · 2026-01-23T11:19:18Z

Thank you @awahab07 for putting this together, I finally got time to look at it and it works great! I think we just have a couple of things to settle before proceeding:

for Light mode my preference is to use Shade 15 as default (solid, 100% opacity)
for Dark mode I would use Shade 110 (solid, 100% opacity)
I believe lines and areas should keep behaving as they already do when they are on their own, it should not cause any bad result I think (will check again)
one last very minor detail that is not a blocker for the PR itself but could be a nice touch. Grouped barcharts display bars attached to each other, when we hover on the legend on one of these series we should add a border of 1px (same color as panel background so that it adapts to dark and light mode) to the non-selected bars so that they can separated visually

Thanks again Abdul!

This reverts commit 97cb8ec.

awahab07 · 2026-01-27T18:25:43Z

for Light mode my preference is to use Shade 15 as default (solid, 100% opacity)
for Dark mode I would use Shade 110 (solid, 100% opacity)

Default shades have been updated to reflect these values.

I believe lines and areas should keep behaving as they already do when they are on their own, it should not cause any bad result I think (will check again)

I've kept them as before.

one last very minor detail that is not a blocker for the PR itself but could be a nice touch. Grouped barcharts display bars attached to each other, when we hover on the legend on one of these series we should add a border of 1px (same color as panel background so that it adapts to dark and light mode) to the non-selected bars so that they can separated visually

This should be tackled in #2514, as a follow-up, as mentioned in. But could be evaluated/discussed to see if a separate on-the-fly border should be implemented just for highlight/unhighlight purposes.

awahab07 · 2026-01-27T18:48:28Z

buildkite update vrt

awahab07 · 2026-02-04T22:01:35Z

buildkite test this

…-state-style-for-partition-charts-and-barcharts # Conflicts: # e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/should-all-values-in-stacked-chart-with-filtered-series-nick-chrome-linux.png # e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/should-render-legend-action-on-mouse-hover-chrome-linux.png

awahab07 · 2026-02-12T13:19:09Z

buildkite update vrt

markov00

There are a couple of points that requires changes: missing waffle implementation and also the fixing some missing colorVariant checks

packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts

packages/charts/src/chart_types/xy_chart/renderer/canvas/points.ts

packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts

packages/charts/src/utils/themes/partition.ts

packages/charts/src/chart_types/partition_chart/renderer/canvas/partition.tsx

- Remove `PartitionDimmedStyle.stroke` prop - Use `getColorFromVariant` in renderered for dimmed fill colors - Add dimming for Waffle renderer - Conver waffle legend dimming with an e2e

storybook/stories/stylings/27_dimmed_highlight_style.story.tsx

…n dimmiing is defined by `{ opacity: number }` (same as line/area/point renderers handle that).

awahab07 · 2026-03-25T00:56:18Z

buildkite update vrt

markov00

Thanks for the changes, looks good to me now.
Please just verify why a test includes a font change

...test.ts-snapshots/metric/should-render-metric-with-value-in-middle-position-chrome-linux.png

mariairiartef

LGTM! 🚀 I've tested it and I didn't find any issues, thanks for addressing the comments

awahab07 · 2026-03-26T02:04:55Z

buildkite update vrt

elastic-datavis · 2026-03-26T03:02:46Z

✅ Successful Deployment (build#165) - `685ae57`

# [71.4.0](v71.3.0...v71.4.0) (2026-03-31) ### Bug Fixes * **legend:** avoid re-rendering ([#2646](#2646)) ([0ca3289](0ca3289)) * **legend:** keep legend values visible when hiding series in list layout ([#2807](#2807)) ([c5089f5](c5089f5)) ### Features * **highlight:** Add support to configure dimmed (unhighlight) colors for Bar, Partition, Waffle and Flame charts ([#2774](#2774)) ([b39e24d](b39e24d)), closes [#ECF1F9](https://github.com/elastic/elastic-charts/issues/ECF1F9) [#384861](https://github.com/elastic/elastic-charts/issues/384861) * **metric:** Add ability to vertically align the metrics values to the middle of the chart ([#2783](#2783)) ([54ca7cb](54ca7cb)) * **theme:** set default labelOptions.widthLimit in themes and update metric.titleWeight default to 500 ([#2802](#2802)) ([fbb8834](fbb8834))

## Summary This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@elastic/charts](https://github.com/elastic/elastic-charts) | dependencies | minor | [`71.3.0` -> `71.4.0`](elastic/elastic-charts@v71.3.0...v71.4.0) | ### Release Notes # [71.4.0](elastic/elastic-charts@v71.3.0...v71.4.0) (2026-03-31) ### Bug Fixes * **legend:** avoid re-rendering ([#2646](elastic/elastic-charts#2646)) ([0ca3289](elastic/elastic-charts@0ca3289)) * **legend:** keep legend values visible when hiding series in list layout ([#2807](elastic/elastic-charts#2807)) ([c5089f5](elastic/elastic-charts@c5089f5)) ### Features * **highlight:** Add support to configure dimmed (unhighlight) colors for Bar, Partition, Waffle and Flame charts ([#2774](elastic/elastic-charts#2774)) ([b39e24d](elastic/elastic-charts@b39e24d)), closes [#ECF1F9](https://github.com/elastic/elastic-charts/issues/ECF1F9) [#384861](https://github.com/elastic/elastic-charts/issues/384861) * **metric:** Add ability to vertically align the metrics values to the middle of the chart ([#2783](elastic/elastic-charts#2783)) ([54ca7cb](elastic/elastic-charts@54ca7cb)) * **theme:** set default labelOptions.widthLimit in themes and update metric.titleWeight default to 500 ([#2802](elastic/elastic-charts#2802)) ([fbb8834](elastic/elastic-charts@fbb8834)) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Abdul Zahid <awahab07@yahoo.com>

## Summary This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@elastic/charts](https://github.com/elastic/elastic-charts) | dependencies | minor | [`71.3.0` -> `71.4.0`](elastic/elastic-charts@v71.3.0...v71.4.0) | ### Release Notes # [71.4.0](elastic/elastic-charts@v71.3.0...v71.4.0) (2026-03-31) ### Bug Fixes * **legend:** avoid re-rendering ([elastic#2646](elastic/elastic-charts#2646)) ([0ca3289](elastic/elastic-charts@0ca3289)) * **legend:** keep legend values visible when hiding series in list layout ([elastic#2807](elastic/elastic-charts#2807)) ([c5089f5](elastic/elastic-charts@c5089f5)) ### Features * **highlight:** Add support to configure dimmed (unhighlight) colors for Bar, Partition, Waffle and Flame charts ([elastic#2774](elastic/elastic-charts#2774)) ([b39e24d](elastic/elastic-charts@b39e24d)), closes [#ECF1F9](https://github.com/elastic/elastic-charts/issues/ECF1F9) [#384861](https://github.com/elastic/elastic-charts/issues/384861) * **metric:** Add ability to vertically align the metrics values to the middle of the chart ([elastic#2783](elastic/elastic-charts#2783)) ([54ca7cb](elastic/elastic-charts@54ca7cb)) * **theme:** set default labelOptions.widthLimit in themes and update metric.titleWeight default to 500 ([elastic#2802](elastic/elastic-charts#2802)) ([fbb8834](elastic/elastic-charts@fbb8834)) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Abdul Zahid <awahab07@yahoo.com>

awahab07 added 5 commits January 20, 2026 00:22

awahab07 added 2 commits January 21, 2026 13:19

revert: remove extra series from bar_clicks and sunburst stories

36fa035

Revert the test-only additions to 1_bar_clicks.story.tsx and 10_sunburst.story.tsx to avoid VRT baseline changes. The dedicated 27_dimmed_highlight_style.story.tsx serves the testing purpose.

awahab07 added :styling Styling related issue :partition Partition/PieChart/Donut/Sunburst/Treemap chart related :xy Bar/Line/Area chart related labels Jan 21, 2026

test(vrt): update screenshots [skip ci]

e5a9f9a

awahab07 linked an issue Jan 21, 2026 that may be closed by this pull request

[Charts] Hover state style for partition charts and barcharts elastic/kibana#245829

Closed

awahab07 added 4 commits January 26, 2026 18:40

Add 'middle' for Metric chart's valuePosition configuration.

97cb8ec

Revert "Add 'middle' for Metric chart's valuePosition configuration."

1331670

This reverts commit 97cb8ec.

PR feedback, update default shades.

82b300f

Api update, lint and type fixes.

d9fdb76

elastic-datavis bot and others added 2 commits January 27, 2026 19:41

test(vrt): update screenshots [skip ci]

b59f7de

Update jest snapshots.

bceaf5c

awahab07 marked this pull request as ready for review January 28, 2026 09:53

test(vrt): update screenshots [skip ci]

3901a6f

markov00 requested review from andrimal, mariairiartef and markov00 and removed request for andrimal and markov00 March 20, 2026 11:08

markov00 requested changes Mar 23, 2026

View reviewed changes

awahab07 and others added 2 commits March 23, 2026 13:19

PR feedback:

120c4fa

- Remove `PartitionDimmedStyle.stroke` prop - Use `getColorFromVariant` in renderered for dimmed fill colors - Add dimming for Waffle renderer - Conver waffle legend dimming with an e2e

test(vrt): update screenshots [skip ci]

b2985b2

mariairiartef reviewed Mar 23, 2026

View reviewed changes

storybook/stories/stylings/27_dimmed_highlight_style.story.tsx Outdated Show resolved Hide resolved

awahab07 and others added 5 commits March 24, 2026 12:04

PR feedback: Use overrideOpacity in partition and bar renderers whe…

2fd52f8

…n dimmiing is defined by `{ opacity: number }` (same as line/area/point renderers handle that).

test(vrt): update screenshots [skip ci]

ffd3056

Fix opacity story and tests.

9b9abbf

test(vrt): update screenshots [skip ci]

c6b3da8

Add dimming for falme charts.

0fd360d

test(vrt): update screenshots [skip ci]

ff19d78

awahab07 requested review from mariairiartef and markov00 March 25, 2026 02:01

markov00 approved these changes Mar 25, 2026

View reviewed changes

...test.ts-snapshots/metric/should-render-metric-with-value-in-middle-position-chrome-linux.png Show resolved Hide resolved

mariairiartef approved these changes Mar 25, 2026

View reviewed changes

Pull unrelated updated snapshot from upstream.

dd56c52

test(vrt): update screenshots [skip ci]

685ae57

awahab07 enabled auto-merge (squash) March 26, 2026 14:21

awahab07 merged commit b39e24d into elastic:main Mar 27, 2026
14 checks passed

maryam-saeidi mentioned this pull request Mar 31, 2026

Upgrade dependency @elastic/charts to v71.4.0 elastic/kibana#260593

Merged

Conversation

awahab07 commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Details

Theme Configuration

Storybook

Issues

Checklist

Uh oh!

awahab07 commented Jan 21, 2026

Uh oh!

awahab07 commented Jan 21, 2026

Uh oh!

awahab07 commented Jan 21, 2026

Uh oh!

delanni commented Jan 23, 2026

Uh oh!

gvnmagni commented Jan 23, 2026

Uh oh!

awahab07 commented Jan 27, 2026

Uh oh!

awahab07 commented Jan 27, 2026

Uh oh!

awahab07 commented Feb 4, 2026

Uh oh!

awahab07 commented Feb 12, 2026

Uh oh!

markov00 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

awahab07 commented Mar 25, 2026

Uh oh!

markov00 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mariairiartef left a comment

Choose a reason for hiding this comment

Uh oh!

awahab07 commented Mar 26, 2026

Uh oh!

elastic-datavis bot commented Mar 26, 2026

✅ Successful Deployment (build#165) - 685ae57

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

awahab07 commented Jan 20, 2026 •

edited

Loading

✅ Successful Deployment (build#165) - `685ae57`