Skip to content

Chart is blurry when put inside an element with "weird" width #9130

@MBR-0001

Description

@MBR-0001

Expected Behavior

The chart isn't blurry

Current Behavior

Chart is blurry

Possible Solution

Set the width of canvas to ceil(value of chart width) instead of floor

Steps to Reproduce

Put the chart in a div with width 98%

https://codepen.io/MBR-0001/pen/mdWOzPv

Context

I don't intentionally set my parent element width to weird values, its just a result of bootstrap vue doing its "thing"

Environment

  • Chart.js version: 3.2.1 (npm)
  • Browser name and version: Chrome 90.0.4430.212
  • Link to your project: N/A

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions