-
Notifications
You must be signed in to change notification settings - Fork 12k
Description
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.
Possible Solution
This is caused by the number rounding at
Chart.js/src/scales/scale.category.js
Line 93 in cb14217
return me.left + Math.round(widthOffset); |
Chart.js/src/scales/scale.category.js
Line 102 in cb14217
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