improve line smoothing to avoid backward curve; fixes #4063

src/libs/monotone-cubic.js

@@ -74,15 +74,24 @@ export const svgPath = (points) => {
 
   for (let i = 0; i < points.length; i++) {
     const point = points[i]
+    const prevPoint = points[i - 1]
     const n = point.length
+    const pn = prevPoint?.length
 
-    if (n > 4) {
-      p += `C${point[0]}, ${point[1]}`
-      p += `, ${point[2]}, ${point[3]}`
-      p += `, ${point[4]}, ${point[5]}`
-    } else if (n > 2) {
-      p += `S${point[0]}, ${point[1]}`
+    if (i > 1 && Math.abs(point[n - 2] - prevPoint[pn - 2]) < 30) {
+      // fallback to quadratic curve if the x distance is too small
+      // or if the curve goes backward too much
+      p += `Q${point[0]}, ${point[1]}`
       p += `, ${point[2]}, ${point[3]}`
+    } else {
+      if (n > 4) {
+        p += `C${point[0]}, ${point[1]}`
+        p += `, ${point[2]}, ${point[3]}`
+        p += `, ${point[4]}, ${point[5]}`
+      } else if (n > 2) {
+        p += `S${point[0]}, ${point[1]}`
+        p += `, ${point[2]}, ${point[3]}`
+      }
     }
   }