Implement new chart legends
- Dominant language
- Python
- Stars
- 44.8k
- Forks
- 4.9k
- Avg merge
- 22h 21m
- Merged PRs (30d)
- 586
Description
The current dashboards legend solution is not always easily readable when there are many different series and the toggle on/off to display within the widget is not always obvious. This especially affects the "Releases" series, which doesn't have a lot of emphasis.
We want to replace chart legends across the app with a custom implementation.
## **Proposed Solution**
See [Figma](https://www.figma.com/design/oXDyENKYCEwT1MnLZNtTma/VM-Dashboards?node-id=449-11811&m=dev&t=CRZMLNcFntPFstt7-1) for details. The new chart legend should be implemented in React (rather than using ECharts' built-in legend formatter) and sit above the charts in widgets. This new legend should be used in all the standard charts (e.g., `TimeSeriesWidgetVisualization`) as well as any other appropriate charts (e.g., the "sparkline" on Issue Details pages) if possible.

## Prior Art
The old Metrics charts had a custom implementation of legends, done in React. It should be possible to resurrect that code and use it for inspo, if needed. If not, ECharts has detailed documentation for how to listen to and dispatch legend events.
## Extra Info
Also consider:
* there are existing bugs in Linear about the legends (e.g., scrolling legends are synchronized right now, which sucks) which will be naturally solved by this ticket
* legend item names are … complicated. There are cases where the legend must show array values, for example, that would be good to consider
Contributor guide
Research direction
Start by locating TimeSeriesWidgetVisualization, the standard chart widgets, and the Issue Details sparkline, then review the linked Figma design and the old Metrics chart legend implementation. Check how ECharts legend events and series names are currently handled. Done means a React legend replaces the built-in legends across appropriate charts, supports clear toggling and complex item names, and avoids synchronized scrolling issues.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- data-visualization, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100