diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx
index 13d8c673c..18805bbdb 100644
--- a/src/components/chart-elements/AreaChart/AreaChart.tsx
+++ b/src/components/chart-elements/AreaChart/AreaChart.tsx
@@ -134,15 +134,13 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
     setActiveDot(undefined);
   }
 
-  const yAxisConfigsValueFormatter = yAxisConfigs.flatMap((yAxisConfig) => {
-    return (
-      yAxisConfig.categories?.map((c) => [c, yAxisConfig.valueFormatter ?? valueFormatter]) ?? []
-    );
-  });
   const yAxisValueFormatters = Object.fromEntries(
-    yAxisConfigsValueFormatter.length > 0
-      ? yAxisConfigsValueFormatter
-      : categories.map((c, idx) => [c, yAxisConfigs[idx]?.valueFormatter ?? valueFormatter]),
+    yAxisConfigs.flatMap((yAxisConfig, i) => {
+      return (
+        yAxisConfig.categories?.map((c) => [c, yAxisConfig.valueFormatter ?? valueFormatter]) ??
+        categories.map((c) => [c, yAxisConfigs[i]?.valueFormatter ?? valueFormatter])
+      );
+    }),
   );
 
   return (
diff --git a/src/stories/chart-elements/AreaChart.stories.tsx b/src/stories/chart-elements/AreaChart.stories.tsx
index 6725571fb..3fd189087 100644
--- a/src/stories/chart-elements/AreaChart.stories.tsx
+++ b/src/stories/chart-elements/AreaChart.stories.tsx
@@ -386,6 +386,13 @@ export const MultipleYAxes: Story = {
   },
 };
 
+export const SingleYAxisWithValueFormatter: Story = {
+  args: {
+    categories: ["Sales", "Successful Payments"],
+    yAxisConfigs: [{ orientation: "left", valueFormatter: (value: number) => `${value} S` }],
+  },
+};
+
 export const MultipleYAxesWithExplicitCategories: Story = {
   args: {
     yAxisConfigs: [