From 45917c866aa73948b5585bc6977ac6c002ecc894 Mon Sep 17 00:00:00 2001
From: Andrew Gregory <andrew.gregory@gmail.com>
Date: Thu, 9 Apr 2026 22:48:40 +0800
Subject: [PATCH] Fix issue #56

Shift the line polygon by half the line width so that it is centered vertically with respect to where it should be. This keeps at least half the line visible at the extremes of the chart area.
---
 src/charts/_line.scss | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/charts/_line.scss b/src/charts/_line.scss
index 6bfa7cc..7925b67 100644
--- a/src/charts/_line.scss
+++ b/src/charts/_line.scss
@@ -191,10 +191,10 @@
               &::before {
                 clip-path:
                   polygon(
-                    0% calc(100% * (1 - var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))))),
-                    100% calc(100% * (1 - var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)))),
-                    100% calc(100% * (1 - var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))) - var(--#{ $variable-prefix }line-size)),
-                    0% calc(100% * (1 - var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)))) - var(--#{ $variable-prefix }line-size))
+                    0% calc(100% * (1 - var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)))) + var(--#{ $variable-prefix }line-size) / 2),
+                    100% calc(100% * (1 - var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))) + var(--#{ $variable-prefix }line-size) / 2),
+                    100% calc(100% * (1 - var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))) - var(--#{ $variable-prefix }line-size) / 2),
+                    0% calc(100% * (1 - var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)))) - var(--#{ $variable-prefix }line-size) / 2)
                   );
               }
 
@@ -224,10 +224,10 @@
               &::before {
                 clip-path:
                   polygon(
-                    0% calc(100% * (1 - var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)))),
-                    100% calc(100% * (1 - var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))))),
-                    100% calc(100% * (1 - var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)))) - var(--#{ $variable-prefix }line-size)),
-                    0% calc(100% * (1 - var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))) - var(--#{ $variable-prefix }line-size))
+                    0% calc(100% * (1 - var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))) + var(--#{ $variable-prefix }line-size) / 2),
+                    100% calc(100% * (1 - var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)))) + var(--#{ $variable-prefix }line-size) / 2),
+                    100% calc(100% * (1 - var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)))) - var(--#{ $variable-prefix }line-size) / 2),
+                    0% calc(100% * (1 - var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))) - var(--#{ $variable-prefix }line-size) / 2)
                   );
               }
 
@@ -259,10 +259,10 @@
               &::before {
                 clip-path:
                   polygon(
-                    0% calc(100% * var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))) - var(--#{ $variable-prefix }line-size)),
-                    100% calc(100% * var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)) - var(--#{ $variable-prefix }line-size)),
-                    100% calc(100% * var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))),
-                    0% calc(100% * var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))))
+                    0% calc(100% * var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))) - var(--#{ $variable-prefix }line-size) / 2),
+                    100% calc(100% * var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)) - var(--#{ $variable-prefix }line-size) / 2),
+                    100% calc(100% * var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)) + var(--#{ $variable-prefix }line-size) / 2),
+                    0% calc(100% * var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))) + var(--#{ $variable-prefix }line-size) / 2)
                   );
               }
 
@@ -292,10 +292,10 @@
               &::before {
                 clip-path:
                   polygon(
-                    0% calc(100% * var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)) - var(--#{ $variable-prefix }line-size)),
-                    100% calc(100% * var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))) - var(--#{ $variable-prefix }line-size)),
-                    100% calc(100% * var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)))),
-                    0% calc(100% * var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)))
+                    0% calc(100% * var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)) - var(--#{ $variable-prefix }line-size) / 2),
+                    100% calc(100% * var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))) - var(--#{ $variable-prefix }line-size) / 2),
+                    100% calc(100% * var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))) + var(--#{ $variable-prefix }line-size) / 2),
+                    0% calc(100% * var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)) + var(--#{ $variable-prefix }line-size) / 2)
                   );
               }