Skip to content

Legend items not clickable and only partially visible #7321

@danleeb

Description

@danleeb

Expected Behavior

All legend items should be clickable (with toggle as default behavior) and all items should be fully visible if positioned right or left.

Current Behavior

Not all legend items are fully visible and items that are above or below the actual chart do not trigger events (click, hover, leave) and can't be toggled if options.legend.position is set to left or right.

Steps to Reproduce

https://jsfiddle.net/8ytbhsaj/

  1. Create a line chart with a few datasets and a visible x-axis.
  2. Set options.legend.position to "right" and options.legend.align to center values.
  3. Reduce chart height until the chart legend is higher than the actual chart.
  4. Some legend items are only partially visible and some are not clickable.

This can be reproduced with different combinations of options.legend.position (left, right) and options.legend.align (center, start, end).

Environment

  • Chart.js version: 2.9.3
  • Browser name and version: Chrome Version 81.0.4044.113 (Official Build) (64-bit), Firefox 75.0 (64-bit)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions