diff --git a/projects/js-packages/charts/src/components/legend/stories/index.stories.tsx b/projects/js-packages/charts/src/components/legend/stories/index.stories.tsx
new file mode 100644
index 0000000000000..dfba38d008992
--- /dev/null
+++ b/projects/js-packages/charts/src/components/legend/stories/index.stories.tsx
@@ -0,0 +1,35 @@
+import { BaseLegend } from '../index';
+import type { Meta } from '@storybook/react';
+
+const data = [
+	{ label: 'Desktop', value: '86%', color: '#3858E9' },
+	{ label: 'Mobile', value: '52%', color: '#80C8FF' },
+];
+
+export default {
+	title: 'JS Packages/Charts/Legend',
+	component: BaseLegend,
+	parameters: {
+		layout: 'centered',
+		docs: {
+			description: {
+				component:
+					'A flexible legend component that can be customized with different styles and orientations.',
+			},
+		},
+	},
+} satisfies Meta< typeof BaseLegend >;
+
+const Template = args => <BaseLegend { ...args } />;
+
+export const Default = Template.bind( {} );
+Default.args = {
+	items: data,
+	orientation: 'horizontal',
+};
+
+export const Vertical = Template.bind( {} );
+Vertical.args = {
+	items: data,
+	orientation: 'vertical',
+};