Skip to content

Legend hover to highlight or dim the matching series #127

Description

@toomingos

Version: @tanstack/charts 0.16.0.

colorLegend renders categories and interactiveColorLegend toggles visibility on click. Neither exposes hover: there is no way to focus or dim the series under the pointer from the legend, which is the default behaviour in Recharts, ECharts, Chart.js and Nivo.

The workaround today is to render the legend in app HTML and drive interaction.setControlledFocus from onRender, so the legend leaves the definition and the tooltip/focus pipeline has two owners.

Would it be possible to add a hover option to the legend extensions, e.g. hover: 'focus' | 'group' | false, that sets controlled focus for the hovered category (and clears it on leave), reusing the existing states / focus machinery? This is a natural sibling to #95 (legend item presentation).

Activity

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions