Fix the rounding issue of floating point numbers in category scale #5880

nagix · 2018-12-03T17:46:07Z

This PR fixes following problems.

Points on the right edge sometimes disappear when using a category scale for x axis (mentioned in Add error margin for detecting if a point or line is in the chartArea #5790).
There is sometimes 1 pixel width gap between filled areas and the rightmost grid line when using a category scale for x axis in a line chart ([BUG] Gap at the right end in an Area chart #5797).
A line with many points looks bumpy when using a category scale for x axis in a line chart (Line Graph line not smooth / Updating max tick limit #5297)
A stepped line with many points is sometimes not drawn when using a category scale for x axis in a line chart ([BUG] Stepped line graph, thin lines disappear on certian screen widths #5576)
1px spaces are seen between bars with barPercentage and categoryPercentage set to 1 (Bar Graph Render Issue in 2.5.0 #3916, [BUG] Spacing between vertical bars with percentages set to 1 #3964)
Grid lines are blurred in comparison with v2.6.0 ([BUG] Sometimes the axes lose their sharpness #4640, Blurred lines after updating from 2.6.0 to 2.7.2 #5431, Blurred bar border after updating from 2.6.0 to 2.7.2 #5532).
Tick lines are not supposed to across or to be off the axis border (by Don't draw tick across axis/border #5178), but this doesn’t work when the width is more than 1px.
Gridlines intersect with the axis border (mentioned in Don't draw tick across axis/border #5178 but not resolved).
An axis border is drawn even if its width is set to 0.

The following changes are made in this PR.

For 1, 2, 3, 4 and 5: Math.round in the category scale code is removed. In my opinion, rounding should be done not in getPixelForTick but in drawing functions to avoid detection errors.
6: The position of grid/tick/axis border lines is aligned in order to avoid anti-aliasing blur when its width is an integer.
7 and 8: the calculation for line positions is fixed.
9: The width of the axis border is checked.

Master: https://jsfiddle.net/nagix/52o0qn47/

This PR: https://jsfiddle.net/nagix/upv21qto/

Fixes #3916
Fixes #3964
Fixes #4640
Fixes #5297
Fixes #5431
Fixes #5532
Fixes #5576
Fixes #5797

simonbrunel

Thanks @nagix, it looks good.

This scale.draw method is quite complex, we would need to clean it deeper (not in this PR of course). Still, a few suggestions that I think would make the impacted code simpler.

simonbrunel · 2018-12-05T17:06:59Z

src/core/core.helpers.js

+	 * @param {Number} lineWidth - A line width.
+	 * @returns {Number} The aligned line pixel value.
+	 */
+	helpers.alignLinePixel = function(chart, linePixel, lineWidth) {


I would declare this method private for sure to not have to deal with deprecation if we realize we don't need it anymore or if we want to change its signature, and maybe rename it for something more generic and shorter:

helpers._alignPixel = function(chart, pixel, width) { // ... }

simonbrunel · 2018-12-06T08:29:23Z

src/core/core.scale.js

+		var alignedTop = helpers.alignLinePixel(chart, me.top, axisWidth);
+		var alignedBottom = helpers.alignLinePixel(chart, me.bottom, axisWidth);
+
+		var xTickStart, xTickEnd, yTickStart, yTickEnd;


If I'm not wrong, depending on the scale orientation, only half of these variables (including the new aligned*) are effectively used so I think we could simplify for something like:

var axisWidth = helpers.valueAtIndexOrDefault(gridLines.lineWidth, 0, 0); var alignPixel = helpers._alignPixel; var aligned, tickStart, tickEnd; if (position === 'top') { aligned = alignPixel(chart, me.bottom, axisWidth); tickStart = me.bottom - tl; tickEnd = aligned - axisWidth / 2; } else if (position === 'bottom') { aligned = alignPixel(chart, me.top, axisWidth); tickStart = aligned + axisWidth / 2; tickEnd = me.top + tl; } else if (position === 'left') { aligned = alignPixel(chart, me.right, axisWidth); tickStart = me.right - tl; tickEnd = aligned - axisWidth / 2; } else { aligned = alignPixel(chart, me.left, axisWidth); tickStart = aligned + axisWidth / 2; tickEnd = me.left + tl; }

Feel free to rename aligned for whatever you think it's better.

I like this simplification. I renamed it to borderValue as it stores the position of the axis border.

simonbrunel · 2018-12-06T08:34:32Z

src/core/core.scale.js

-				y1 = y2 = options.position === 'top' ? me.bottom : me.top;
-				y1 += aliasPixel;
-				y2 += aliasPixel;
+				y1 = y2 = position === 'top' ? alignedBottom : alignedTop;


I think we are computing too many values here and based on my previous comment, I think we can rewrite this part as:

var x1, x2, y1, y2; if (isHorizontal) { x1 = alignPixel(chart, me.left, firstLineWidth) - firstLineWidth / 2; x2 = alignPixel(chart, me.right, lastLineWidth) + lastLineWidth / 2; y1 = y2 = aligned; } else { y1 = alignPixel(chart, me.top, firstLineWidth) - firstLineWidth / 2; y2 = alignPixel(chart, me.bottom, lastLineWidth) + lastLineWidth / 2; x1 = x2 = aligned; }

simonbrunel · 2018-12-06T08:38:39Z

src/core/core.scale.js

-			context.moveTo(x1, y1);
-			context.lineTo(x2, y2);
-			context.stroke();
+			if (axisWidth) {


Good catch! do we also need to compute all the code above if at the end we draw nothing? or should we break earlier, for example at line 933 (if (gridLines.drawBorder && axisWidth))?

I realized axisWidth has to be set to 0 if gridLines.drawBorder is false, so I moved this logic at the beginning of draw.

- Remove `Math.round` in the category scale code - Add `helpers._alignPixel` to align grid/tick/axis border lines - Fix grid/tick/axis border line calculation - Add a check of the width of the axis border - Refactor core.scale code

simonbrunel

👍

yangwonlohengramm · 2019-03-28T00:53:26Z

Hi, I'm wondering what version of Chart.js this is? Reason being I need to use a version of angular-chart that contains this fix and I'm hoping there is a corresponding version there.

Thanks!

benmccann · 2019-03-28T01:37:37Z

This PR is in Chart.js 2.8.0

…hartjs#5880) - Remove `Math.round` in the category scale code - Add `helpers._alignPixel` to align grid/tick/axis border lines - Fix grid/tick/axis border line calculation - Add a check of the width of the axis border - Refactor core.scale code

nagix force-pushed the issue-5880 branch from 6f90b59 to b51a88d Compare December 3, 2018 18:19

etimberg requested a review from simonbrunel December 3, 2018 19:12

nagix force-pushed the issue-5880 branch 2 times, most recently from 1e80895 to 221784c Compare December 4, 2018 12:02

simonbrunel requested changes Dec 6, 2018

View reviewed changes

simonbrunel added the type: bug label Dec 6, 2018

nagix force-pushed the issue-5880 branch from 221784c to 9e7a4cc Compare December 6, 2018 14:45

simonbrunel added this to the Version 2.8 milestone Dec 6, 2018

simonbrunel approved these changes Dec 6, 2018

View reviewed changes

simonbrunel requested a review from etimberg December 6, 2018 15:44

etimberg approved these changes Dec 8, 2018

View reviewed changes

simonbrunel merged commit 40495ec into chartjs:master Dec 9, 2018

nagix deleted the issue-5880 branch December 9, 2018 16:14

snyk-bot mentioned this pull request Nov 9, 2019

[Snyk] Upgrade chart.js from 2.8.0 to 2.9.1 socialsoftware/quizzes-tutor#45

Merged

This was referenced Mar 4, 2020

[Snyk] Upgrade chart.js from 2.8.0 to 2.9.3 ajesse11x/gravity#5

Open

[Snyk] Upgrade chart.js from 2.8.0 to 2.9.3 qsays/ceph#4

Open

vpetersson mentioned this pull request Mar 7, 2020

[Snyk] Upgrade chart.js from 2.7.3 to 2.9.3 WoTTsecurity/api#764

Merged

This was referenced Mar 9, 2020

[Snyk] Upgrade chart.js from 2.7.1 to 2.9.3 savinovvu/reg-exp#5

Closed

[Snyk] Upgrade chart.js from 2.8.0 to 2.9.3 MichaelKohler/reps-voting-analysis#14

Merged

snyk-bot mentioned this pull request Apr 1, 2020

[Snyk] Upgrade chart.js from 2.7.2 to 2.9.3 baophucct/wallet#4

Open

This was referenced Apr 14, 2020

[Snyk] Upgrade chart.js from 2.8.0 to 2.9.3 mc-ireiser/startbootstrap-sb-admin-2#2

Open

[Snyk] Upgrade chart.js from 2.8.0 to 2.9.3 mc-ireiser/coreui-free-vue-admin-template#5

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix the rounding issue of floating point numbers in category scale #5880

Fix the rounding issue of floating point numbers in category scale #5880

nagix commented Dec 3, 2018 •

edited

simonbrunel left a comment

simonbrunel Dec 5, 2018

nagix Dec 6, 2018

simonbrunel Dec 6, 2018

nagix Dec 6, 2018

simonbrunel Dec 6, 2018

simonbrunel Dec 6, 2018

nagix Dec 6, 2018

simonbrunel left a comment

yangwonlohengramm commented Mar 28, 2019

benmccann commented Mar 28, 2019

Fix the rounding issue of floating point numbers in category scale #5880

Fix the rounding issue of floating point numbers in category scale #5880

Conversation

nagix commented Dec 3, 2018 • edited

simonbrunel left a comment

Choose a reason for hiding this comment

simonbrunel Dec 5, 2018

Choose a reason for hiding this comment

nagix Dec 6, 2018

Choose a reason for hiding this comment

simonbrunel Dec 6, 2018

Choose a reason for hiding this comment

nagix Dec 6, 2018

Choose a reason for hiding this comment

simonbrunel Dec 6, 2018

Choose a reason for hiding this comment

simonbrunel Dec 6, 2018

Choose a reason for hiding this comment

nagix Dec 6, 2018

Choose a reason for hiding this comment

simonbrunel left a comment

Choose a reason for hiding this comment

yangwonlohengramm commented Mar 28, 2019

benmccann commented Mar 28, 2019

nagix commented Dec 3, 2018 •

edited