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 · 2026-02-13T17:40:11Z

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

+      const isUnhighlighted = highlightedQuadSet.size > 0 && !highlightedQuadSet.has(quad);
+      const dimmed = arcSeriesStyle.arc.dimmed;
+      const dimmedFill = dimmed && 'fill' in dimmed ? dimmed.fill : undefined;
+      const useDimmedColor = isUnhighlighted && dimmedFill;


Can we extract this into a function and reuse it?
Probably we have probably a function that is used everytime we need to pick up the a dimmed or non-dimmed color and reuse it elsewhere also on area/line/point charts

markov00 · 2026-02-13T17:44:45Z

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

+  dimmed?:
+    | { opacity: number }
+    | {


This style is actually not used for a Partition chart. the Partition has the PartitionStyle in the theme

markov00 · 2026-02-13T17:45:51Z

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

  areaPointFill: SEMANTIC_COLORS.plainLight,
+
+  barFill: SEMANTIC_COLORS.shade15,
+  arcFill: SEMANTIC_COLORS.shade15,


I get where this comes from ArcStyle but we should call it differently, because the same style will be applied on every partition chart, not just the pie chart

markov00 · 2026-02-13T18:00:27Z

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

+        quad.fillColor = dimmedFill;
+        if (quad.x0 !== quad.x1) renderTaperedBorder(ctx, quad);
+        quad.fillColor = originalFillColor; // Restore


if we need to update the color just for that call, I prefer instead passing just the required properties (in case also by revisiting the renderTaperedBorder arguments to accept just the required props and passing them, rather then modifing and restore that value.

markov00 · 2026-02-13T18:02:42Z

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

+  _focus: unknown,
+  _animationState: AnimationState,


I see where this function get called, we probably need to fix there and call the relative functions with just the minimal amount of arguments, living these arguments there doesn't have much sense

delanni · 2026-02-18T19:50:11Z

buildkite build this

elastic-datavis · 2026-02-18T20:25:50Z

✅ Successful Deployment (build#2) - `3901a6f`

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

Open

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 self-requested a review February 12, 2026 14:36

markov00 reviewed Feb 13, 2026

View reviewed changes

Comments

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 Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

markov00 Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

markov00 Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

markov00 Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

markov00 Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

delanni commented Feb 18, 2026

Uh oh!

elastic-datavis bot commented Feb 18, 2026

✅ Successful Deployment (build#2) - 3901a6f

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

awahab07 commented Jan 20, 2026 •

edited

Loading

✅ Successful Deployment (build#2) - `3901a6f`