Fix offset on doughnut charts (#10469)

Fix offset on doughnut charts

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;
+    const halfAngle = (this.startAngle + this.endAngle) / 2;
-    if (offset) {
+    ctx.translate(Math.cos(halfAngle) * offset, Math.sin(halfAngle) * offset);
-      radiusOffset = offset / 2;
+    const fix = 1 - Math.sin(Math.min(PI, circumference || 0));
-      const halfAngle = (this.startAngle + this.endAngle) / 2;
+    const radiusOffset = offset * fix;
-      ctx.translate(Math.cos(halfAngle) * radiusOffset, Math.sin(halfAngle) * radiusOffset);
-      if (this.circumference >= PI) {
-        radiusOffset = offset;
-      }
-    }
 
     ctx.fillStyle = options.backgroundColor;
     ctx.strokeStyle = options.borderColor;