Merge pull request #500 from plsdev89/fix/499-chart-vertex-spikes

Fix chart vertex spikes when smooth charts are disabled

Author: Eldemarkki

src/components/DailyCodingTimeChart/DailyCodingTimeChart.tsx

@@ -109,6 +109,9 @@ export const DailyCodingTimeChart = ({
             data: data.map((entry) => entry.duration),
             borderColor: "#1f78b4",
             borderWidth: 4,
+            // Avoid sharp "miter" spikes at vertices when drawing straight segments.
+            borderJoinStyle: "round",
+            borderCapStyle: "round",
             pointRadius: 2,
             // Avoid "overshoot" where the smoothed curve goes above/below actual points.
             cubicInterpolationMode: smoothCharts ? "monotone" : "default",

src/components/MonthlyCodingTimeChart/MonthlyCodingTimeChart.tsx

@@ -119,6 +119,9 @@ export const MonthlyCodingTimeChart = ({
             data: data.map((entry) => entry.duration),
             borderColor: "#1f78b4",
             borderWidth: 4,
+            // Avoid sharp "miter" spikes at vertices when drawing straight segments.
+            borderJoinStyle: "round",
+            borderCapStyle: "round",
             pointRadius: 2,
             // Avoid "overshoot" where the smoothed curve goes above/below actual points.
             cubicInterpolationMode: smoothCharts ? "monotone" : "default",