Text trunc newline examples

docs/src/content/components/Text.md

@@ -11,14 +11,26 @@ related: []
 
 :example{ name="playground" }
 
-## Along path
+### Truncate text of axis labels
+
+Sometimes your axis labels overwhelm the available space. You can use `truncate` to limit the text to a maximum length.
+
+:example{ name="truncate-axis-labels" }
+
+### Word wrap with text of axis labels
+
+You can use explicit newlines (`\n`) in the text value to force a word wrap. This works regardless of the layer you are using.
+
+:::note
+Note you can change the rendering layer with the toggle at the top of the page.
+:::
+
+:example{ name="word-wrap-axis-labels" }
+
+### Along path
 
 `Text` can be used with `Arc`'s `children` snippet and `getArcTextProps` to write along the `inner`, `outer`, or `middle` of the arc path.
 
 The text will smartly orientate based on the direction (clockwise / counter-clockwise) and location (top, bottom, left, right) of the arc
 
 :example{ component="Arc" name="label-direction" }
-
-<!-- ### Word wrap with explicit `\n`
-
-:example{ name="word-wrap-with-explicit-n" } -->

docs/src/examples/catalog/Axis.json

@@ -4030,5 +4030,5 @@
       "line": "<Axis placement=\"bottom\" rule />"
     }
   ],
-  "updatedAt": "2026-01-13T17:22:23.271Z"
+  "updatedAt": "2026-01-25T21:44:17.452Z"
 }

docs/src/examples/catalog/BarChart.json

@@ -1778,7 +1778,21 @@
       "path": "/example/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "lineNumber": 31,
       "line": "<BarChart"
+    },
+    {
+      "example": "truncate-axis-labels",
+      "component": "Text",
+      "path": "/example/Text/truncate-axis-labels",
+      "lineNumber": 34,
+      "line": "<BarChart"
+    },
+    {
+      "example": "word-wrap-axis-labels",
+      "component": "Text",
+      "path": "/example/Text/word-wrap-axis-labels",
+      "lineNumber": 29,
+      "line": "<BarChart"
     }
   ],
-  "updatedAt": "2026-01-13T17:22:23.313Z"
+  "updatedAt": "2026-01-25T22:34:26.556Z"
 }

docs/src/examples/catalog/Chart.json

@@ -2056,6 +2056,13 @@
       "lineNumber": 85,
       "line": "<Chart height={600}>"
     },
+    {
+      "example": "basic",
+      "component": "Path",
+      "path": "/example/Path/basic",
+      "lineNumber": 5,
+      "line": "<Chart height={300}>"
+    },
     {
       "example": "circles",
       "component": "Pattern",
@@ -2809,7 +2816,7 @@
       "example": "playground",
       "component": "Text",
       "path": "/example/Text/playground",
-      "lineNumber": 45,
+      "lineNumber": 44,
       "line": "<Chart height={224}>"
     },
     {
@@ -3044,5 +3051,5 @@
       "line": "<Chart {data} x=\"x\" y=\"y\" height={400}>"
     }
   ],
-  "updatedAt": "2026-01-25T18:09:21.455Z"
+  "updatedAt": "2026-01-25T21:44:17.657Z"
 }

docs/src/examples/catalog/Circle.json

@@ -603,7 +603,7 @@
       "example": "playground",
       "component": "Text",
       "path": "/example/Text/playground",
-      "lineNumber": 49,
+      "lineNumber": 48,
       "line": "<Circle cx={config.x} cy={config.y} r={2} fill=\"red\" />"
     },
     {
@@ -621,5 +621,5 @@
       "line": "<Circle cx={point.x} cy={point.y} r={4} class=\"fill-primary\" />"
     }
   ],
-  "updatedAt": "2026-01-13T17:22:23.474Z"
+  "updatedAt": "2026-01-25T20:58:11.921Z"
 }

docs/src/examples/catalog/Layer.json

@@ -2094,6 +2094,13 @@
       "lineNumber": 87,
       "line": "<Layer>"
     },
+    {
+      "example": "basic",
+      "component": "Path",
+      "path": "/example/Path/basic",
+      "lineNumber": 6,
+      "line": "<Layer>"
+    },
     {
       "example": "circles",
       "component": "Pattern",
@@ -2854,7 +2861,7 @@
       "example": "playground",
       "component": "Text",
       "path": "/example/Text/playground",
-      "lineNumber": 46,
+      "lineNumber": 45,
       "line": "<Layer {type}>"
     },
     {
@@ -3096,5 +3103,5 @@
       "line": "<Layer onpointermove={onPointerMove}>"
     }
   ],
-  "updatedAt": "2026-01-25T18:09:22.016Z"
+  "updatedAt": "2026-01-25T21:44:18.232Z"
 }

docs/src/examples/catalog/Path.json

@@ -1,6 +1,36 @@
 {
   "component": "Path",
-  "examples": [],
-  "usage": [],
-  "updatedAt": "2025-12-29T21:36:45.113Z"
+  "examples": [
+    {
+      "name": "basic",
+      "path": "/example/Path/basic",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 5,
+          "line": "<Chart height={300}>"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 6,
+          "line": "<Layer>"
+        },
+        {
+          "component": "Path",
+          "lineNumber": 7,
+          "line": "<Path pathData=\"M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80\" strokeWidth={2} />"
+        }
+      ]
+    }
+  ],
+  "usage": [
+    {
+      "example": "basic",
+      "component": "Path",
+      "path": "/example/Path/basic",
+      "lineNumber": 7,
+      "line": "<Path pathData=\"M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80\" strokeWidth={2} />"
+    }
+  ],
+  "updatedAt": "2026-01-25T20:58:12.648Z"
 }

docs/src/examples/catalog/Text.json

@@ -7,26 +7,48 @@
       "components": [
         {
           "component": "Chart",
-          "lineNumber": 45,
+          "lineNumber": 44,
           "line": "<Chart height={224}>"
         },
         {
           "component": "Layer",
-          "lineNumber": 46,
+          "lineNumber": 45,
           "line": "<Layer {type}>"
         },
         {
           "component": "Text",
-          "lineNumber": 47,
-          "line": "<Text {...config} truncate={truncate ? truncateOptions : false} />"
+          "lineNumber": 46,
+          "line": "<Text {...config} truncate={config.truncate ? config.truncateOptions : false} />"
         },
         {
           "component": "Circle",
-          "lineNumber": 49,
+          "lineNumber": 48,
           "line": "<Circle cx={config.x} cy={config.y} r={2} fill=\"red\" />"
         }
       ]
     },
+    {
+      "name": "truncate-axis-labels",
+      "path": "/example/Text/truncate-axis-labels",
+      "components": [
+        {
+          "component": "BarChart",
+          "lineNumber": 34,
+          "line": "<BarChart"
+        }
+      ]
+    },
+    {
+      "name": "word-wrap-axis-labels",
+      "path": "/example/Text/word-wrap-axis-labels",
+      "components": [
+        {
+          "component": "BarChart",
+          "lineNumber": 29,
+          "line": "<BarChart"
+        }
+      ]
+    },
     {
       "name": "word-wrap-with-explicit-newline",
       "path": "/example/Text/word-wrap-with-explicit-newline",
@@ -544,8 +566,8 @@
       "example": "playground",
       "component": "Text",
       "path": "/example/Text/playground",
-      "lineNumber": 47,
-      "line": "<Text {...config} truncate={truncate ? truncateOptions : false} />"
+      "lineNumber": 46,
+      "line": "<Text {...config} truncate={config.truncate ? config.truncateOptions : false} />"
     },
     {
       "example": "word-wrap-with-explicit-newline",
@@ -639,5 +661,5 @@
       "line": "<Text"
     }
   ],
-  "updatedAt": "2026-01-25T18:09:22.616Z"
+  "updatedAt": "2026-01-25T22:34:27.876Z"
 }

docs/src/examples/components/Text/truncate-axis-labels.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { BarChart, defaultChartPadding } from 'layerchart';
+	import TextTruncateControls from '$lib/components/controls/TextTruncateControls.svelte';
+	import { schemeTableau10 } from 'd3-scale-chromatic';
+
+	const data = [
+		{
+			date: new Date('2026-01-22T05:00:00.000Z'),
+			value: 47,
+			baseline: 100,
+			label: 'This is 1st really long text'
+		},
+		{
+			date: new Date('2026-01-23T05:00:00.000Z'),
+			value: 27,
+			baseline: 20,
+			label: 'This is 2nd really long text'
+		},
+		{
+			date: new Date('2026-01-24T05:00:00.000Z'),
+			value: 82,
+			baseline: 26,
+			label: 'This is 3rd really long text'
+		}
+	];
+
+	let position = $state<'start' | 'middle' | 'end'>('end');
+
+	export { data };
+</script>
+
+<TextTruncateControls bind:position />
+
+<BarChart
+	{data}
+	x="value"
+	y="label"
+	labels={{ placement: 'inside' }}
+	cRange={schemeTableau10}
+	orientation="horizontal"
+	props={{
+		yAxis: {
+			tickLabelProps: {
+				truncate: {
+					maxChars: 19,
+					ellipsis: '...',
+					position: position as 'start' | 'middle' | 'end'
+				}
+			}
+		}
+	}}
+	padding={defaultChartPadding({ top: 20, left: 90 })}
+	height={300}
+/>

docs/src/examples/components/Text/word-wrap-axis-labels.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { BarChart, defaultChartPadding } from 'layerchart';
+	import { schemeCategory10 } from 'd3-scale-chromatic';
+
+	const data = [
+		{
+			date: new Date('2026-01-22T05:00:00.000Z'),
+			value: 67,
+			baseline: 100,
+			label: 'This is\n1st really\nlong text'
+		},
+		{
+			date: new Date('2026-01-23T05:00:00.000Z'),
+			value: 97,
+			baseline: 20,
+			label: 'This is\n2nd really\nlong text'
+		},
+		{
+			date: new Date('2026-01-24T05:00:00.000Z'),
+			value: 61,
+			baseline: 26,
+			label: 'This is\n3rd really\nlong text'
+		}
+	];
+
+	export { data };
+</script>
+
+<BarChart
+	{data}
+	x="value"
+	y="label"
+	labels={{ placement: 'inside' }}
+	cRange={schemeCategory10}
+	orientation="horizontal"
+	padding={defaultChartPadding({ top: 20, left: 40 })}
+	height={300}
+/>

docs/src/lib/components/controls/TextTruncateControls.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Field, ToggleGroup, ToggleOption } from 'svelte-ux';
+
+	interface Props {
+		position: 'start' | 'middle' | 'end';
+	}
+
+	let { position = $bindable('end') }: Props = $props();
+</script>
+
+<Field label="truncate position" classes={{ container: 'w-fit' }}>
+	<ToggleGroup bind:value={position} variant="outline" size="sm" inset class="w-full">
+		<ToggleOption value="start">start</ToggleOption>
+		<ToggleOption value="middle">middle</ToggleOption>
+		<ToggleOption value="end">end</ToggleOption>
+	</ToggleGroup>
+</Field>