Proposed fix for issue #6830 (#6884)

* proposed fix for issue #6830 https://github.com/chartjs/Chart.js/issues/6830

* Updated to pass the full options object instead of a shadow borderwidth. Updated migration guide regarding the API signature change.

* Moved to use options.radius instead of caching radius; updated related migration docs.

diff --git a/docs/getting-started/v3-migration.md b/docs/getting-started/v3-migration.md
index dafe825732836f91031f6fd17ccb703fe29993c2..d11ccb1f760c343c2fc280f118c2190db277cd45 100644 (file)
--- a/docs/getting-started/v3-migration.md
+++ b/docs/getting-started/v3-migration.md
@@ -199,3 +199,10 @@ Animation system was completely rewritten in Chart.js v3. Each property can now
 #### Layout
 
 * `ILayoutItem.update` no longer has a return value
+
+#### Helpers
+
+##### Canvas Helper
+
+* The second parameter to `drawPoint` is now the full options object, so `style`, `rotation`, and `radius` are no longer passed explicitly
+

diff --git a/src/elements/element.point.js b/src/elements/element.point.js
index ebdeb5b5f3bbdda5f927c7eaf2a936cd1561a84a..25b5e2d1981f13d7d2a9e001f3a1dd26ba7fb518 100644 (file)
--- a/src/elements/element.point.js
+++ b/src/elements/element.point.js
@@ -64,9 +64,8 @@ class Point extends Element {
        draw(ctx, chartArea) {
                const me = this;
                const options = me.options;
-               const radius = options.radius;
 
-               if (me.skip || radius <= 0) {
+               if (me.skip || options.radius <= 0) {
                        return;
                }
 
@@ -75,7 +74,7 @@ class Point extends Element {
                        ctx.strokeStyle = options.borderColor;
                        ctx.lineWidth = options.borderWidth;
                        ctx.fillStyle = options.backgroundColor;
-                       helpers.canvas.drawPoint(ctx, options.pointStyle, radius, me.x, me.y, options.rotation);
+                       helpers.canvas.drawPoint(ctx, options, me.x, me.y);
                }
        }
 }

diff --git a/src/helpers/helpers.canvas.js b/src/helpers/helpers.canvas.js
index 64f38db48265d0cfdd4a6fe6dc86d48caa4e5267..001a4870e5bc7ff06784867e9f82578494397a70 100644 (file)
--- a/src/helpers/helpers.canvas.js
+++ b/src/helpers/helpers.canvas.js
@@ -32,8 +32,11 @@ export function clear(chart) {
        chart.ctx.clearRect(0, 0, chart.width, chart.height);
 }
 
-export function drawPoint(ctx, style, radius, x, y, rotation) {
+export function drawPoint(ctx, options, x, y) {
        var type, xOffset, yOffset, size, cornerRadius;
+       var style = options.pointStyle;
+       var rotation = options.rotation;
+       var radius = options.radius;
        var rad = (rotation || 0) * RAD_PER_DEG;
 
        if (style && typeof style === 'object') {
@@ -142,7 +145,9 @@ export function drawPoint(ctx, style, radius, x, y, rotation) {
        }
 
        ctx.fill();
-       ctx.stroke();
+       if (options.borderWidth > 0) {
+               ctx.stroke();
+       }
 }
 
 /**

diff --git a/test/fixtures/controller.bubble/point-style.json b/test/fixtures/controller.bubble/point-style.json
index 37835a283c0c9b60186a3d319261a7f1426f9b79..71de48a885afecf95705c75208f21981f1cdb804 100644 (file)
--- a/test/fixtures/controller.bubble/point-style.json
+++ b/test/fixtures/controller.bubble/point-style.json
@@ -45,7 +45,7 @@
                 ],
                 "backgroundColor": "transparent",
                 "borderColor": "#0000ff",
-                "borderWidth": 0,
+                "borderWidth": 1,
                 "pointStyle": [
                     "circle",
                     "cross",
@@ -73,7 +73,7 @@
                 ],
                 "backgroundColor": "#00ff00",
                 "borderColor": "#0000ff",
-                "borderWidth": 0,
+                "borderWidth": 1,
                 "pointStyle": [
                     "circle",
                     "cross",
@@ -103,7 +103,7 @@
             "elements": {
                 "line": {
                     "borderColor": "transparent",
-                    "borderWidth": 0,
+                    "borderWidth": 1,
                     "fill": false
                 },
                 "point": {