doc(AnnotationLine): Add rotated alebsl with vertical line example

Author: techniq

packages/layerchart/src/routes/docs/components/AnnotationLine/+page.svelte

@@ -82,6 +82,49 @@
   </div>
 </Preview>
 
+<h2>Vertical with rotation</h2>
+
+<Preview data={data.appleStock}>
+  <div class="h-[300px] p-4 border rounded-sm">
+    <LineChart data={data.appleStock} x="date" y="value" {renderContext} {debug}>
+      {#snippet aboveMarks({ context })}
+        <AnnotationLine
+          x={new Date('2010-01-01')}
+          label="Start"
+          labelXOffset={4}
+          props={{
+            line: { class: '[stroke-dasharray:2,2] stroke-danger' },
+            label: {
+              class: 'fill-danger',
+              rotate: -90,
+              textAnchor: 'end',
+              verticalAnchor: 'end',
+              dx: -2,
+              dy: 0,
+            },
+          }}
+        />
+
+        <AnnotationLine
+          x={new Date('2010-12-31')}
+          label="End"
+          labelXOffset={4}
+          props={{
+            line: { class: '[stroke-dasharray:2,2] stroke-danger' },
+            label: {
+              class: 'fill-danger',
+              rotate: 90,
+              verticalAnchor: 'end',
+              dx: -4,
+              dy: 0,
+            },
+          }}
+        />
+      {/snippet}
+    </LineChart>
+  </div>
+</Preview>
+
 <h2>Horizontal</h2>
 
 <Preview data={data.appleStock}>