LineChart-padding

docs/src/examples/components/LineChart/axis-labels-inside.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
@@ -10,19 +10,18 @@
 	{data}
 	x="date"
 	y="value"
+	xNice
 	height={300}
 	props={{
 		yAxis: {
 			tickLabelProps: {
 				textAnchor: 'start',
-				verticalAnchor: 'end'
+				verticalAnchor: 'end',
+				dx: 4
 			},
-			tickLength: 0
+			tickLength: 0,
+			rule: true
 		}
 	}}
-	padding={{
-		left: 0,
-		top: 10,
-		bottom: 24
-	}}
+	padding={{ ...defaultChartPadding(), top: 15, right: 10 }}
 />

docs/src/examples/components/LineChart/basic.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} />
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	padding={{ ...defaultChartPadding(), right: 10 }}
+	height={300}
+/>

docs/src/examples/components/LineChart/brush.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
-	import { LineChart } from 'layerchart';
 
 	const data = await getAppleStock();
 	export { data };
@@ -15,5 +15,6 @@
 		spline: { motion: { type: 'tween', duration: 200 } },
 		xAxis: { motion: { type: 'tween', duration: 200 }, tickMultiline: true }
 	}}
+	padding={{ ...defaultChartPadding(), left: 25 }}
 	height={300}
 />

docs/src/examples/components/LineChart/curve.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { curveCatmullRom } from 'd3-shape';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} props={{ spline: { curve: curveCatmullRom } }} />
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	props={{ spline: { curve: curveCatmullRom } }}
+	padding={{ ...defaultChartPadding(), right: 10 }}
+	height={300}
+/>

docs/src/examples/components/LineChart/custom-tooltip.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { LineChart, Tooltip } from 'layerchart';
+	import { LineChart, Tooltip, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 	import { format } from '@layerstack/utils';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300}>
+<LineChart {data} x="date" y="value" padding={{ ...defaultChartPadding(), right: 10 }} height={300}>
 	{#snippet tooltip({ context })}
 		<Tooltip.Root
 			x={context.padding.left}

docs/src/examples/components/LineChart/custom.svelte

@@ -1,13 +1,21 @@
 <script lang="ts">
-	import { Axis, Highlight, Layer, LineChart, Spline, Tooltip } from 'layerchart';
+	import {
+		LineChart,
+		Axis,
+		Highlight,
+		Layer,
+		defaultChartPadding,
+		Spline,
+		Tooltip
+	} from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 	import { format } from '@layerstack/utils';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300}>
+<LineChart {data} x="date" y="value" padding={{ ...defaultChartPadding(), right: 10 }} height={300}>
 	{#snippet children({ context })}
 		<Layer>
 			<Axis placement="left" grid rule />

docs/src/examples/components/LineChart/default-series-label.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' }).map((d) => {
@@ -11,4 +11,10 @@
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="visits" height={300} />
+<LineChart
+	{data}
+	x="date"
+	y="visits"
+	padding={{ ...defaultChartPadding(), right: 10 }}
+	height={300}
+/>

docs/src/examples/components/LineChart/draw.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 	import { slide } from 'svelte/transition';
 	import ShowControls from '$lib/components/controls/fields/ShowField.svelte';
@@ -14,6 +14,12 @@
 
 <div class="h-[300px]">
 	{#if show}
-		<LineChart {data} x="date" y="value" props={{ spline: { draw: true } }} />
+		<LineChart
+			{data}
+			x="date"
+			y="value"
+			padding={{ ...defaultChartPadding(), right: 10 }}
+			props={{ spline: { draw: true } }}
+		/>
 	{/if}
 </div>

docs/src/examples/components/LineChart/dynamic-data.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { ticks } from 'd3-array';
 
 	let data = $state(ticks(-2, 2, 200).map(Math.sin));
@@ -36,6 +36,7 @@
 			//   },
 			// },
 		}}
+		padding={{ ...defaultChartPadding(), right: 10 }}
 		height={300}
 	/>
 </div>

docs/src/examples/components/LineChart/gradient-encoding.svelte

@@ -7,11 +7,11 @@
 	import { interpolateTurbo } from 'd3-scale-chromatic';
 
 	const data = await getDailyTemperature();
-	export { data };
 
 	const temperatureColor = $derived(
 		scaleSequential(extent(data, (d) => d.value as number) as [number, number], interpolateTurbo)
 	);
+	export { data };
 </script>
 
 <LineChart {data} x="date" y="value" yDomain={null} height={300}>

docs/src/examples/components/LineChart/labels-with-points.svelte

@@ -1,9 +1,18 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} points labels={{ offset: 10 }} />
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	xNice
+	padding={{ ...defaultChartPadding(), top: 25, right: 10 }}
+	height={300}
+	points
+	labels={{ offset: 10 }}
+/>

docs/src/examples/components/LineChart/labels-within-points.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
@@ -10,12 +10,14 @@
 	{data}
 	x="date"
 	y="value"
-	height={300}
+	xNice
 	points={{ r: 12 }}
 	labels={{ placement: 'center', class: 'text-xs fill-surface-300' }}
 	props={{
 		highlight: {
 			points: false
 		}
 	}}
+	padding={{ ...defaultChartPadding(), top: 25, right: 10 }}
+	height={300}
 />

docs/src/examples/components/LineChart/labels.svelte

@@ -1,9 +1,16 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} labels={{ offset: 10 }} />
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	padding={{ ...defaultChartPadding(), right: 10, top: 25 }}
+	height={300}
+	labels={{ offset: 10 }}
+/>

docs/src/examples/components/LineChart/large-radial-series.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { flatGroup } from 'd3-array';
 	import { getDailyTemperatures } from '$lib/data.remote';
 
@@ -35,5 +35,6 @@
 			props: { opacity: year === 2024 ? 1 : year === 2023 ? 0.5 : 0.1 }
 		};
 	})}
+	padding={{ ...defaultChartPadding(), top: 15, bottom: 15 }}
 	height={500}
 />

docs/src/examples/components/LineChart/large-series.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { flatGroup } from 'd3-array';
 	import { getDailyTemperatures } from '$lib/data.remote';
 
@@ -30,5 +30,6 @@
 			props: { opacity: year === 2024 ? 1 : year === 2023 ? 0.5 : 0.1 }
 		};
 	})}
+	padding={{ ...defaultChartPadding(), left: 30 }}
 	height={500}
 />

docs/src/examples/components/LineChart/legend.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -26,6 +26,7 @@
 			color: 'var(--color-oranges)'
 		}
 	]}
+	padding={{ ...defaultChartPadding(), right: 10 }}
 	height={300}
 	legend
 />

docs/src/examples/components/LineChart/line-annotation.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
 
 	const data = await getAppleStock();
@@ -10,7 +10,6 @@
 	{data}
 	x="date"
 	y="value"
-	height={300}
 	annotations={[
 		{
 			type: 'line',
@@ -24,4 +23,6 @@
 			}
 		}
 	]}
+	padding={{ ...defaultChartPadding(), left: 25 }}
+	height={300}
 />

docs/src/examples/components/LineChart/null-dashed-gaps.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart, Spline } from 'layerchart';
+	import { LineChart, Spline, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' }).map((d) => {
@@ -11,7 +11,7 @@
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300}>
+<LineChart {data} x="date" y="value" padding={{ ...defaultChartPadding(), right: 10 }} height={300}>
 	{#snippet belowMarks({ series })}
 		{#each series as s}
 			<Spline

docs/src/examples/components/LineChart/null-gaps.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' }).map((d) => {
@@ -11,4 +11,11 @@
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" points height={300} />
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	points
+	padding={{ ...defaultChartPadding(), right: 10 }}
+	height={300}
+/>