Skip to content

[BUG] Gap at the right end in an Area chart #5797

@nagix

Description

@nagix

There is one pixel width gap at the right end in an Area chart with a category scale. This doesn't happen with other scale types or in 2.6.0 or earlier.

screenshot 2018-10-28 at 11 29 52 pm

Possible Solution

This is caused by the number rounding at

return me.left + Math.round(widthOffset);
and
return me.top + Math.round(heightOffset);

Either chart.chartArea.left or right is not rounded but getPixelForValue in a category scale returns a rounded value, so that causes one pixel gap between the edge of the filled area and the gridline at the right end.

This can be solved by removing Math.round, and actually #4944 fixed the issue by doing so. My question is if we can completely remove number rounding because it should have been introduced for performance optimization. Since chart.chartArea.left is not rounded currently, it needs to be also rounded if we really want optimization, but that rounding every data point causes the original issue in #4944. So, removing number rounding seems to be the right way.

Steps to Reproduce

See https://jsfiddle.net/nagix/qo8mxvfp/

Environment

  • Chart.js version: 2.7.0 - 2.7.3 (No issue in 2.6.0 or earlier)
  • Browser name and version: Chrome, FireFox and Safari

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