Default PieChart labels to `placement="callout"

Author: techniq

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

@@ -5,16 +5,16 @@
 	import { fruitColors } from '$lib/utils/fruits';
 
 	const placements: { label: string; value: ArcLabelPlacement }[] = [
+		{ label: 'Callout', value: 'callout' },
 		{ label: 'Centroid', value: 'centroid' },
 		{ label: 'Centroid (rotated)', value: 'centroid-rotated' },
 		{ label: 'Centroid (radial)', value: 'centroid-radial' },
 		{ label: 'Inner', value: 'inner' },
 		{ label: 'Middle', value: 'middle' },
-		{ label: 'Outer', value: 'outer' },
-		{ label: 'Callout', value: 'callout' }
+		{ label: 'Outer', value: 'outer' }
 	];
 
-	let placement: ArcLabelPlacement = $state('centroid');
+	let placement: ArcLabelPlacement = $state('callout');
 	let offset = $state(0);
 
 	const data = longData.filter((d) => d.year === 2019);

packages/layerchart/src/lib/components/charts/PieChart.svelte

@@ -227,9 +227,11 @@
     ...restProps
   }: PieChartProps<TData> = $props();
 
-  const labelsConfig = $derived(
-    labels === true ? ({} as ArcLabelConfig & { value?: Accessor }) : labels || null
-  );
+  const labelsConfig = $derived.by<(ArcLabelConfig & { value?: Accessor }) | null>(() => {
+    if (labels === true) return { placement: 'callout' };
+    if (labels) return { placement: 'callout', ...labels };
+    return null;
+  });
 
   const series = $derived(
     seriesProp === undefined ? [{ key: 'default', value: value }] : seriesProp