techniq · techniq · May 9, 2025 · May 9, 2025
diff --git a/.changeset/blue-doodles-chew.md b/.changeset/blue-doodles-chew.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+breaking(AnnotationLine|AnnotationPoint): Change `labelOffset` into explicit `labelXOffset` and `labelYOffset` for greater control (aligns with AnnotationRange)
diff --git a/packages/layerchart/src/lib/components/AnnotationLine.svelte b/packages/layerchart/src/lib/components/AnnotationLine.svelte
@@ -17,8 +17,11 @@
     /** Placement of the label */
     labelPlacement?: Placement;
 
-    /** Offset of the label */
-    labelOffset?: number;
+    /** X offset of the label */
+    labelXOffset?: number;
+
+    /** Y offset of the label */
+    labelYOffset?: number;
 
     /** Classes for inner elements */
     props?: {
@@ -44,7 +47,8 @@
     y,
     label,
     labelPlacement = 'top-right',
-    labelOffset = 0,
+    labelXOffset = 0,
+    labelYOffset = 0,
     props,
   }: AnnotationLineProps = $props();
 
@@ -62,25 +66,17 @@
   const labelProps = $derived<ComponentProps<typeof Text>>(
     isVertical
       ? {
-          x:
-            line.x1 +
-            (['top', 'bottom'].includes(labelPlacement)
-              ? 0 // Offset applies to `y`
-              : labelPlacement.includes('left')
-                ? -labelOffset
-                : labelOffset),
+          x: line.x1 + (labelPlacement.includes('left') ? -labelXOffset : labelXOffset),
           y:
             (labelPlacement.includes('top')
               ? line.y2
               : labelPlacement.includes('bottom')
                 ? line.y1
                 : (line.y1 - line.y2) / 2) +
-            (labelPlacement === 'top'
-              ? -labelOffset
-              : labelPlacement === 'bottom'
-                ? labelOffset
-                : 0),
-          dy: -2, // adjust for smaler font size
+            (['top', 'bottom-left', 'bottom-right'].includes(labelPlacement)
+              ? -labelYOffset
+              : labelYOffset),
+          dy: -2, // adjust for smaller font size
           textAnchor: labelPlacement.includes('left')
             ? 'end'
             : labelPlacement.includes('right')
@@ -104,19 +100,11 @@
               : labelPlacement.includes('right')
                 ? line.x2
                 : (line.x2 - line.x1) / 2) +
-            (labelPlacement === 'left'
-              ? -labelOffset
-              : labelPlacement === 'right'
-                ? labelOffset
-                : 0),
-          y:
-            line.y1 +
-            (['left', 'right'].includes(labelPlacement)
-              ? 0 // Offset applies to `x`
-              : labelPlacement.includes('top')
-                ? -labelOffset
-                : labelOffset),
-          dy: -2, // adjust for smaler font size
+            (['left', 'top-right', 'bottom-right'].includes(labelPlacement)
+              ? -labelXOffset
+              : labelXOffset),
+          y: line.y1 + (labelPlacement.includes('top') ? -labelYOffset : labelYOffset),
+          dy: -2, // adjust for smaller font size
           textAnchor:
             labelPlacement === 'left'
               ? 'end' // place beside line

diff --git a/packages/layerchart/src/lib/components/AnnotationPoint.svelte b/packages/layerchart/src/lib/components/AnnotationPoint.svelte
@@ -20,8 +20,11 @@
     /** Placement of the label */
     labelPlacement?: Placement;
 
-    /** Offset of the label */
-    labelOffset?: number;
+    /** X offset of the label */
+    labelXOffset?: number;
+
+    /** Y offset of the label */
+    labelYOffset?: number;
 
     /** Details (description, etc) useful to display in tooltip */
     details?: any;
@@ -51,7 +54,8 @@
     r = 4,
     label,
     labelPlacement = 'center',
-    labelOffset = 0,
+    labelXOffset = 0,
+    labelYOffset = 0,
     details,
     props,
   }: AnnotationPointProps = $props();
@@ -66,18 +70,12 @@
   const labelProps = $derived<ComponentProps<typeof Text>>({
     x:
       point.x +
-      (labelPlacement.includes('left')
-        ? -(r + labelOffset)
-        : labelPlacement.includes('right')
-          ? r + labelOffset
-          : 0),
+      ((['top', 'center', 'bottom'].includes(labelPlacement) ? 0 : r) + labelXOffset) *
+        (labelPlacement.includes('left') ? -1 : 1),
     y:
       point.y +
-      (labelPlacement.includes('top')
-        ? -(r + labelOffset)
-        : labelPlacement.includes('bottom')
-          ? r + labelOffset
-          : 0),
+      ((['left', 'center', 'right'].includes(labelPlacement) ? 0 : r) + labelYOffset) *
+        (labelPlacement.includes('top') ? -1 : 1),
     dy: -2, // adjust for smaler font size
     textAnchor: labelPlacement.includes('left')
       ? 'end'

diff --git a/packages/layerchart/src/routes/docs/components/AnnotationLine/+page.svelte b/packages/layerchart/src/routes/docs/components/AnnotationLine/+page.svelte
@@ -58,7 +58,8 @@
     'bottom-right',
   ] as const;
   let placement: Placement = $state('top-right');
-  let offset = $state(0);
+  let xOffset = $state(0);
+  let yOffset = $state(0);
 
   let renderContext: 'svg' | 'canvas' = $state('svg');
   let debug = $state(false);
@@ -97,7 +98,7 @@
         <AnnotationLine
           x={new Date('2010-03-30')}
           label="Event"
-          labelOffset={4}
+          labelXOffset={4}
           props={{
             line: { class: '[stroke-dasharray:2,2] stroke-danger' },
             label: { class: 'fill-danger' },
@@ -161,7 +162,8 @@
     </Menu>
   </Toggle>
 
-  <RangeField label="Offset" bind:value={offset} max={10} />
+  <RangeField label="X Offset" bind:value={xOffset} max={10} />
+  <RangeField label="Y Offset" bind:value={yOffset} max={10} />
 </div>
 
 <Preview data={data.appleStock}>
@@ -181,7 +183,8 @@
           y={500}
           label={placement}
           labelPlacement={placement}
-          labelOffset={offset}
+          labelXOffset={xOffset}
+          labelYOffset={yOffset}
           props={{
             line: { class: '[stroke-dasharray:2,2] stroke-danger' },
             label: { class: 'fill-danger' },
@@ -217,7 +220,8 @@
     </Menu>
   </Toggle>
 
-  <RangeField label="Offset" bind:value={offset} max={10} />
+  <RangeField label="X Offset" bind:value={xOffset} max={10} />
+  <RangeField label="Y Offset" bind:value={yOffset} max={10} />
 </div>
 
 <Preview data={data.appleStock}>
@@ -237,7 +241,8 @@
           x={new Date('2010-03-30')}
           label={placement}
           labelPlacement={placement}
-          labelOffset={offset}
+          labelXOffset={xOffset}
+          labelYOffset={yOffset}
           props={{
             line: { class: '[stroke-dasharray:2,2] stroke-danger' },
             label: { class: 'fill-danger' },
@@ -317,7 +322,7 @@
           y={500}
           label="Max"
           labelPlacement="bottom-right"
-          labelOffset={2}
+          labelYOffset={2}
           props={{
             line: { class: '[stroke-dasharray:2,2] _stroke-danger' },
           }}

diff --git a/packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.svelte b/packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.svelte
@@ -61,7 +61,8 @@
     'bottom-right',
   ] as const;
   let placement: Placement = $state('top');
-  let offset = $state(0);
+  let xOffset = $state(0);
+  let yOffset = $state(0);
   let radius = $state(4);
 
   let renderContext: 'svg' | 'canvas' = $state('svg');
@@ -276,7 +277,7 @@
           y={lastPoint.value}
           label="Apple"
           labelPlacement="right"
-          labelOffset={4}
+          labelXOffset={4}
           props={{
             circle: { class: 'fill-primary' },
             label: { class: 'fill-primary font-bold' },
@@ -289,7 +290,7 @@
 
 <h2>Label placement</h2>
 
-<div class="grid grid-cols-3 gap-2 mb-2">
+<div class="grid grid-cols-4 gap-2 mb-2">
   <Toggle let:on={open} let:toggle>
     <Field label="Placement" class="cursor-pointer" on:click={toggle}>
       <span class="text-sm">
@@ -312,8 +313,9 @@
     </Menu>
   </Toggle>
 
-  <RangeField label="Offset" bind:value={offset} max={10} />
   <RangeField label="Radius" bind:value={radius} max={10} />
+  <RangeField label="X Offset" bind:value={xOffset} max={10} />
+  <RangeField label="Y Offset" bind:value={yOffset} max={10} />
 </div>
 
 <Preview data={data.appleStock}>
@@ -336,7 +338,8 @@
           r={radius}
           label={placement}
           labelPlacement={placement}
-          labelOffset={offset}
+          labelXOffset={xOffset}
+          labelYOffset={yOffset}
           props={{
             circle: { class: 'fill-secondary' },
             label: { class: 'fill-secondary font-bold' },
@@ -359,7 +362,7 @@
             r={4}
             label="Featured"
             labelPlacement="bottom"
-            labelOffset={16}
+            labelYOffset={16}
             props={{
               circle: { class: 'fill-secondary' },
               label: { class: 'text-xs fill-secondary font-bold' },

diff --git a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
@@ -1151,7 +1151,8 @@
           type: 'line',
           y: 500,
           label: 'Max',
-          labelOffset: 4,
+          labelXOffset: 4,
+          labelYOffset: 2,
           props: {
             label: { class: 'fill-danger' },
             line: { class: '[stroke-dasharray:2,2] stroke-danger' },
@@ -1240,7 +1241,7 @@
           seriesKey: s.key,
           label: s.key,
           labelPlacement: 'right',
-          labelOffset: 4,
+          labelXOffset: 4,
           x: lastDataPoint.date,
           y: lastDataPoint.value,
           props: {

diff --git a/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte b/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
@@ -1463,7 +1463,7 @@
           r: 4,
           label: 'Today',
           labelPlacement: 'bottom',
-          labelOffset: 16,
+          labelYOffset: 16,
           props: {
             circle: { class: 'fill-secondary' },
             label: { class: 'text-xs fill-secondary font-bold' },

diff --git a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
@@ -915,7 +915,8 @@
           type: 'line',
           y: 500,
           label: 'Max',
-          labelOffset: 4,
+          labelXOffset: 4,
+          labelYOffset: 2,
           props: {
             label: { class: 'fill-danger' },
             line: { class: '[stroke-dasharray:2,2] stroke-danger' },
@@ -1005,7 +1006,7 @@
           seriesKey: s.key,
           label: s.key,
           labelPlacement: 'right',
-          labelOffset: 4,
+          labelXOffset: 4,
           x: lastDataPoint.date,
           y: lastDataPoint.value,
           props: {

diff --git a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte
@@ -377,7 +377,7 @@
           layer: 'below',
           label: 'First point',
           labelPlacement: 'top',
-          labelOffset: 4,
+          labelYOffset: 4,
           x: spiralData[0].x,
           y: spiralData[0].y,
           r: 10,
@@ -391,7 +391,7 @@
           layer: 'below',
           label: 'Last point',
           labelPlacement: 'top',
-          labelOffset: 4,
+          labelYOffset: 4,
           x: spiralData[spiralData.length - 1].x,
           y: spiralData[spiralData.length - 1].y,
           r: 10,
@@ -423,6 +423,8 @@
         {
           type: 'line',
           label: 'Max',
+          labelXOffset: 4,
+          labelYOffset: 2,
           y: 320,
           props: {
             label: { class: 'fill-danger' },
@@ -490,7 +492,7 @@
           y: [230, 270],
           label: 'Range',
           labelPlacement: 'bottom',
-          labelYOffset: 4,
+          labelYOffset: -16,
           pattern: {
             size: 8,
             lines: {