Skip to content

feat: chart legend#302

Merged
hcopp merged 30 commits intomasterfrom
feat/chart-legend
Jan 26, 2026
Merged

feat: chart legend#302
hcopp merged 30 commits intomasterfrom
feat/chart-legend

Conversation

@hcopp
Copy link
Copy Markdown
Contributor

@hcopp hcopp commented Jan 13, 2026

What changed? Why?

This PR adds a new chart component, Legend.

It also adds support for hideBeaconLabels prop to Scrubber and BarComponent to BarChart.

UI changes

Mobile

Web

image image image image image image

Testing

How has it been tested?

  • Unit tests
  • Interaction tests
  • Pseudo State tests
  • Manual - Web
  • Manual - Android (Emulator / Device)
  • Manual - iOS (Emulator / Device)

Testing instructions

Illustrations/Icons Checklist

Required if this PR changes files under packages/illustrations/** or packages/icons/**

  • verified visreg changes with Terran (include link to visreg run/approval)
  • all illustration/icons names have been reviewed by Dom and/or Terran

Change management

type=routine
risk=low
impact=sev5

automerge=false

@cb-heimdall
Copy link
Copy Markdown
Collaborator

cb-heimdall commented Jan 13, 2026

✅ Heimdall Review Status

Requirement Status More Info
Reviews 1/1
Denominator calculation
Show calculation
1 if user is bot 0
1 if user is external 0
2 if repo is sensitive 0
From .codeflow.yml 1
Additional review requirements
Show calculation
Max 0
0
From CODEOWNERS 1
Global minimum 0
Max 1
1
1 if commit is unverified 0
Sum 1
CODEOWNERS ✅ See below

CODEOWNERS

Code Owner Status Calculation
ui-systems-eng-team 1/1
Denominator calculation
Additional CODEOWNERS Requirement
Show calculation
Sum 0
0
From CODEOWNERS 1
Sum 1

@hcopp hcopp self-assigned this Jan 13, 2026
@hcopp hcopp requested a review from cb-ekuersch January 13, 2026 22:13
@hcopp hcopp marked this pull request as ready for review January 13, 2026 22:16
</Text>
) : (
label
)}
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am waiting to hear back from design regarding if we should add aria-hidden to the default legend item or not, since users may expect to only hear the name of each series when scrubbing.

},
]}
yAxis={{ domain: { min: -domainLimit, max: domainLimit } }}
aria-hidden="true"
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This example and above were interfering with screen reader since they automatically update.

key: 'Combobox',
getComponent: () =>
require('@coinbase/cds-mobile/alpha/combobox/__stories__/Combobox.stories').default,
},
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was added when running the sync script

originY={effectiveOriginY}
roundBottom={roundBottom}
roundTop={roundTop}
seriesId={seriesId}
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This provides support for custom bar components

}
```

You can use `hideBeaconLabels` to hide beacon labels, while still being able to provide a label for a series.
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a nice benefit of legend, teams can still label lines without the beacon labels

Copy link
Copy Markdown
Contributor

@cb-ekuersch cb-ekuersch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great addition!

@hcopp hcopp merged commit a25b2cd into master Jan 26, 2026
27 checks passed
@hcopp hcopp deleted the feat/chart-legend branch January 26, 2026 18:13
cb-ekuersch pushed a commit that referenced this pull request Jan 30, 2026
* feat: chart legend

* Add hideBeaconLabels

* Support custom components on bar chart

* Update docs

* Update combobox routes

* Bump version

* Bump ui-mobile-playground version

* Improve example accessibility

* Simplify creation of legend and add a11y label

* Add mobile example

* Fix spread issue to dom

* Update changelog

* Fix changelog

* Update web changelog

* Improve types

* Drop shape wrapper

* Change LegendItem to LegendEntry

* Reuse root box props

* Lint

* Fix lint

* Bump version
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

3 participants