Skip to content

YAxis ticks text is cut off on low screen widths #8475

@robske110

Description

@robske110

Expected Behavior

The chart should give the yaxis ticks enough room to be not cut off.

Current Behavior

The y axis ticks are cut off under specific circumstances.

Possible Solution

N/A

Steps to Reproduce

Unfortunately I did not find out what exactly causes this, but I have copied an example out of my app (and simplified it as much as possible). Oddly enough when one removes any yAxis out of the list (even a hidden one with display: false) ticks are displayed correctly again.
Open this jsfiddle and make the width of the output really small (to emulate it being viewed on a phone screen)
https://jsfiddle.net/jevuwhyc/
image

Context

Noticed in a chart with a lot of yAxes (most of them are hidden at any given time though)

Environment

  • Chart.js version: 2.9.4
  • Browser name and version: Safari 14.0.3, Firefox 86.0b9

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