diff --git a/packages/ui/core-components/src/lib/unsorted/viz/area/Area.svelte b/packages/ui/core-components/src/lib/unsorted/viz/area/Area.svelte
index e6dc2027b6..fa2de3ee93 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/area/Area.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/area/Area.svelte
@@ -65,6 +65,8 @@
 	}
 	export let showAllLabels = false;
 	export let seriesOrder = undefined;
+	export let seriesFmt = undefined;
+
 	// Prop check. If local props supplied, use those. Otherwise fall back to global props.
 	$: data = $props.data;
 	$: x = $props.x;
@@ -145,6 +147,20 @@
 		symbolSize: labels && !markers ? 0 : markerSize,
 		step: step ? stepPosition : false
 	};
+	// data,
+	// x,
+	// y,
+	// series,
+	// swapXY,
+	// baseConfig,
+	// name,
+	// xMismatch, // this checks for scenarios where xType is string and xDataType is number. When this is the case, we need to inject strings into the x axis, or else it will cause echarts to think there are duplicate x-axis values (e.g., "4" and 4)
+	// columnSummary,
+	// seriesOrder,
+	// size = undefined,
+	// tooltipTitle = undefined,
+	// y2 = undefined,
+	// seriesFmt = undefined
 
 	$: seriesConfig = getSeriesConfig(
 		data,
@@ -156,7 +172,11 @@
 		name,
 		xMismatch,
 		columnSummary,
-		seriesOrder
+		seriesOrder,
+		undefined, // size (not needed)
+		undefined, // tooltipTitle (not needed)
+		undefined, // y2 (not needed)
+		seriesFmt
 	);
 
 	$: config.update((d) => {
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/area/AreaChart.stories.svelte b/packages/ui/core-components/src/lib/unsorted/viz/area/AreaChart.stories.svelte
index 5e411df9f2..f634709b95 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/area/AreaChart.stories.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/area/AreaChart.stories.svelte
@@ -276,3 +276,24 @@ LIMIT 200`,
 	{@const data = Query.create(`select * from numeric_series`, query)}
 	<AreaChart {data} {...args} />
 </Story>
+<Story
+	name="With seriesFmt"
+	args={{ x: 'x', y: 'y', series: 'series', seriesOrder: ['ivory', 'blue', 'violet', 'olive'] }}
+	let:args
+>
+	{@const data = Query.create(
+		`SELECT 0.1 AS series, 1 AS x, 10 AS y
+UNION
+SELECT 0.1 AS series, 2 AS x, 20 AS y
+UNION
+SELECT 0.1 AS series, 3 AS x, 30 AS y
+UNION
+SELECT 0.5 AS series, 1 AS x, 5 AS y
+UNION
+SELECT 0.5 AS series, 2 AS x, 15 AS y
+UNION
+SELECT 0.5 AS series, 3 AS x, 25 AS y`,
+		query
+	)}
+	<AreaChart {data} seriesFmt="pct" {...args} />
+</Story>
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/area/AreaChart.svelte b/packages/ui/core-components/src/lib/unsorted/viz/area/AreaChart.svelte
index cd1ee9b84e..317c91732e 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/area/AreaChart.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/viz/area/AreaChart.svelte
@@ -79,6 +79,7 @@
 	export let seriesOrder = undefined;
 
 	export let connectGroup = undefined;
+	export let seriesFmt = undefined;
 </script>
 
 <Chart
@@ -143,6 +144,7 @@
 		{labelFmt}
 		{showAllLabels}
 		{seriesOrder}
+		{seriesFmt}
 	/>
 	<slot />
 </Chart>