Fix offset on doughnut charts (#10469)

Fix offset on doughnut charts

diff --git a/src/elements/element.arc.js b/src/elements/element.arc.js
index 3ec9091b77ffcb2ab68b16d1ed60b6b63e8e8295..439c025abb8ec02b73d3a8e66c081eb8125bc426 100644 (file)
--- a/src/elements/element.arc.js
+++ b/src/elements/element.arc.js
@@ -332,7 +332,7 @@ export default class ArcElement extends Element {
 
   draw(ctx) {
     const {options, circumference} = this;
-    const offset = (options.offset || 0) / 2;
+    const offset = (options.offset || 0) / 4;
     const spacing = (options.spacing || 0) / 2;
     const circular = options.circular;
     this.pixelMargin = (options.borderAlign === 'inner') ? 0.33 : 0;
@@ -344,15 +344,10 @@ export default class ArcElement extends Element {
 
     ctx.save();
 
-    let radiusOffset = 0;
-    if (offset) {
-      radiusOffset = offset / 2;
-      const halfAngle = (this.startAngle + this.endAngle) / 2;
-      ctx.translate(Math.cos(halfAngle) * radiusOffset, Math.sin(halfAngle) * radiusOffset);
-      if (this.circumference >= PI) {
-        radiusOffset = offset;
-      }
-    }
+    const halfAngle = (this.startAngle + this.endAngle) / 2;
+    ctx.translate(Math.cos(halfAngle) * offset, Math.sin(halfAngle) * offset);
+    const fix = 1 - Math.sin(Math.min(PI, circumference || 0));
+    const radiusOffset = offset * fix;
 
     ctx.fillStyle = options.backgroundColor;
     ctx.strokeStyle = options.borderColor;

diff --git a/test/fixtures/controller.doughnut/doughnut-offset.png b/test/fixtures/controller.doughnut/doughnut-offset.png
index e4e23f6ec660c16bb349966d55aad0af966bcf81..a45212d6b380ed8cbb1a2bca620f3a6f14776c31 100644 (file)
Binary files a/test/fixtures/controller.doughnut/doughnut-offset.png and b/test/fixtures/controller.doughnut/doughnut-offset.png differ

diff --git a/test/fixtures/controller.doughnut/doughnut-spacing-and-offset.png b/test/fixtures/controller.doughnut/doughnut-spacing-and-offset.png
index e78e313ddc01d628bbfa5ea58c393f0d2d8609e8..0a68820fa0155f0f66b8407b13f9432f03ab0cbd 100644 (file)
Binary files a/test/fixtures/controller.doughnut/doughnut-spacing-and-offset.png and b/test/fixtures/controller.doughnut/doughnut-spacing-and-offset.png differ

diff --git a/test/fixtures/controller.doughnut/pie-offset.png b/test/fixtures/controller.doughnut/pie-offset.png
index c2cf18bf59a2e8bc35b7bfe4289ba99aa8b7f879..6697d8acd0c6814a067f0e9ffa5d653fb055954d 100644 (file)
Binary files a/test/fixtures/controller.doughnut/pie-offset.png and b/test/fixtures/controller.doughnut/pie-offset.png differ