From e76d7196ee80123c42ab63a60431e2bacd6a1758 Mon Sep 17 00:00:00 2001
From: Grzegorz Chudzinski-Pawlowski
 <112354940+grzegorz-cp@users.noreply.github.com>
Date: Tue, 17 Dec 2024 16:25:52 +1300
Subject: [PATCH] Charts: Fixing theme storybook story (#40640)

* Charts: Fixing theme demo after introducing multiple series

* changelog
---
 .../changelog/fix-charts-line-chart-themes    |  4 +++
 .../providers/theme/stories/index.stories.tsx | 31 ++++++++++++++++---
 2 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 projects/js-packages/charts/changelog/fix-charts-line-chart-themes

diff --git a/projects/js-packages/charts/changelog/fix-charts-line-chart-themes b/projects/js-packages/charts/changelog/fix-charts-line-chart-themes
new file mode 100644
index 0000000000000..5dc5e61fc4c0a
--- /dev/null
+++ b/projects/js-packages/charts/changelog/fix-charts-line-chart-themes
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fixing a bug in Chart storybook data.
diff --git a/projects/js-packages/charts/src/providers/theme/stories/index.stories.tsx b/projects/js-packages/charts/src/providers/theme/stories/index.stories.tsx
index 69e1cdd50887f..27a5f350232fd 100644
--- a/projects/js-packages/charts/src/providers/theme/stories/index.stories.tsx
+++ b/projects/js-packages/charts/src/providers/theme/stories/index.stories.tsx
@@ -21,6 +21,29 @@ const sampleData = [
 	{ date: new Date( '2024-01-05' ), value: 30, label: 'Jan 5' },
 ];
 
+const lineSampleData = [
+	{
+		label: 'Line 1',
+		data: [
+			{ date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' },
+			{ date: new Date( '2024-01-02' ), value: 20, label: 'Jan 2' },
+			{ date: new Date( '2024-01-03' ), value: 15, label: 'Jan 3' },
+			{ date: new Date( '2024-01-04' ), value: 25, label: 'Jan 4' },
+			{ date: new Date( '2024-01-05' ), value: 30, label: 'Jan 5' },
+		],
+	},
+	{
+		label: 'Line 2',
+		data: [
+			{ date: new Date( '2024-01-01' ), value: 1, label: 'Jan 1' },
+			{ date: new Date( '2024-01-02' ), value: 2, label: 'Jan 2' },
+			{ date: new Date( '2024-01-03' ), value: 1.5, label: 'Jan 3' },
+			{ date: new Date( '2024-01-04' ), value: 2.5, label: 'Jan 4' },
+			{ date: new Date( '2024-01-05' ), value: 3, label: 'Jan 5' },
+		],
+	},
+];
+
 const pieData = [
 	{
 		label: 'Windows',
@@ -54,7 +77,7 @@ export const Default: Story = {
 	render: () => (
 		<ThemeProvider>
 			<GridComponent>
-				<LineChart data={ sampleData } width={ 400 } height={ 300 } />
+				<LineChart data={ lineSampleData } width={ 400 } height={ 300 } />
 				<BarChart data={ sampleData } width={ 400 } height={ 300 } />
 				<PieSemiCircleChart
 					data={ pieData }
@@ -72,7 +95,7 @@ export const JetpackTheme: Story = {
 	render: () => (
 		<ThemeProvider theme={ jetpackTheme }>
 			<GridComponent>
-				<LineChart data={ sampleData } width={ 400 } height={ 300 } />
+				<LineChart data={ lineSampleData } width={ 400 } height={ 300 } />
 				<BarChart data={ sampleData } width={ 400 } height={ 300 } />
 				<PieSemiCircleChart
 					data={ pieData }
@@ -90,7 +113,7 @@ export const WooTheme: Story = {
 	render: () => (
 		<ThemeProvider theme={ wooTheme }>
 			<GridComponent>
-				<LineChart data={ sampleData } width={ 400 } height={ 300 } />
+				<LineChart data={ lineSampleData } width={ 400 } height={ 300 } />
 				<BarChart data={ sampleData } width={ 400 } height={ 300 } />
 				<PieSemiCircleChart
 					data={ pieData }
@@ -116,7 +139,7 @@ export const CustomColorTheme: Story = {
 			} }
 		>
 			<GridComponent>
-				<LineChart data={ sampleData } width={ 400 } height={ 300 } />
+				<LineChart data={ lineSampleData } width={ 400 } height={ 300 } />
 				<BarChart data={ sampleData } width={ 400 } height={ 300 } />
 				<PieSemiCircleChart
 					data={ pieData }