diff --git a/packages/go-ui-storybook/src/stories/BarChart.stories.tsx b/packages/go-ui-storybook/src/stories/BarChart.stories.tsx
index 0cda7d565..4ba471ad8 100644
--- a/packages/go-ui-storybook/src/stories/BarChart.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/BarChart.stories.tsx
@@ -1,6 +1,5 @@
 import { BarChartProps } from '@ifrc-go/ui';
 import type {
-    Args,
     Meta,
     StoryObj,
 } from '@storybook/react';
@@ -14,21 +13,19 @@ interface Option {
 }
 
 const data: Option[] = [
-    { id: 1, label: '2022', value: 10 },
-    { id: 2, label: '2023', value: 9 },
-    { id: 3, label: '2024', value: 5 },
-    { id: 4, label: '2020', value: 2 },
+    { id: 1, label: 'Apples', value: 50 },
+    { id: 2, label: 'Oranges', value: 30 },
+    { id: 3, label: 'Bananas', value: 20 },
+    { id: 4, label: 'Grapes', value: 40 },
 ];
 
 const keySelector = (d: Option) => d.id;
 const valueSelector = (d: Option) => d.value;
 const labelSelector = (d: Option) => d.label;
-
 const maxValue = Math.max(...data.map(valueSelector));
-type BarChartSpecificProps = BarChartProps<Option>;
-
-type Story = StoryObj<typeof BarChart>;
 
+type BarChartSpecificProps = BarChartProps<Option>;
+type Story = StoryObj<BarChartSpecificProps>;
 const meta: Meta<BarChartSpecificProps> = {
     title: 'Components/BarChart',
     component: BarChart,
@@ -44,34 +41,27 @@ const meta: Meta<BarChartSpecificProps> = {
 
 export default meta;
 
-function Template(args:Args) {
-    return (
-        <BarChart
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...args}
-            data={data}
-            keySelector={keySelector}
-            labelSelector={labelSelector}
-            valueSelector={valueSelector}
-            maxValue={maxValue}
-        />
-    );
-}
-
 export const Default: Story = {
-    render: Template,
+    args: {
+        data,
+        keySelector,
+        labelSelector,
+        valueSelector,
+        maxValue,
+        className: 'bar-chart',
+    },
 };
 
-export const MaxRows: Story = {
-    render: Template,
+export const WithMaxRows: Story = {
     args: {
-        maxRows: 5,
+        ...Default.args,
+        maxRows: 3,
     },
 };
 
-export const CompactValue: Story = {
-    render: Template,
+export const WithCompactValue: Story = {
     args: {
+        ...Default.args,
         compactValue: true,
     },
 };
diff --git a/packages/go-ui-storybook/src/stories/BarChart.tsx b/packages/go-ui-storybook/src/stories/BarChart.tsx
index e1ad6ccc8..9a2759fba 100644
--- a/packages/go-ui-storybook/src/stories/BarChart.tsx
+++ b/packages/go-ui-storybook/src/stories/BarChart.tsx
@@ -3,12 +3,12 @@ import {
     BarChartProps as PureBarChartProps,
 } from '@ifrc-go/ui';
 
-type BarChartProps<D> = PureBarChartProps<D>
+export type BarChartProps<D> = PureBarChartProps<D>
 
-function WrappedBarChart<const D>(props: BarChartProps<D>) {
+function BarChart<const D>(props: BarChartProps<D>) {
     return (
         <PureBarChart {...props} />// eslint-disable-line react/jsx-props-no-spreading
     );
 }
 
-export default WrappedBarChart;
+export default BarChart;
diff --git a/packages/go-ui-storybook/src/stories/index.css b/packages/go-ui-storybook/src/stories/index.css
index 8e107ba06..bb538e121 100644
--- a/packages/go-ui-storybook/src/stories/index.css
+++ b/packages/go-ui-storybook/src/stories/index.css
@@ -66,3 +66,7 @@
 .text-body > p {
     font-size: var(--go-ui-font-size-lg);
 }
+
+.bar-chart {
+    width: 30rem;
+}