diff --git a/ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_chart.stories.js b/ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_chart.stories.js
new file mode 100644
index 0000000000000000000000000000000000000000..b8227d4de694708ee092626a9e5e98c84bd7db70
--- /dev/null
+++ b/ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_chart.stories.js
@@ -0,0 +1,33 @@
+import { withVuexStore } from 'storybook_addons/vuex_store';
+import DurationChart from './duration_chart.vue';
+import { selectedStageData, selectedStage } from './stories_constants';
+
+export default {
+  component: DurationChart,
+  title: 'ee/analytics/cycle_analytics/components/duration_chart',
+  decorators: [withVuexStore],
+};
+
+const Template = (args, { argTypes, createVuexStore }) => ({
+  components: { DurationChart },
+  props: Object.keys(argTypes),
+  template: '<duration-chart v-bind="$props" />',
+  store: createVuexStore({
+    state: {
+      selectedStage,
+    },
+    modules: {
+      durationChart: {
+        namespaced: true,
+        getters: {
+          durationChartPlottableData: () => selectedStageData,
+        },
+        state: {
+          isLoading: false,
+        },
+      },
+    },
+  }),
+});
+
+export const Default = Template.bind({});
diff --git a/ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_overview_chart.stories.js b/ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_overview_chart.stories.js
new file mode 100644
index 0000000000000000000000000000000000000000..834fbc9a1b7729b905e499f57ff4d86455109dbf
--- /dev/null
+++ b/ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_overview_chart.stories.js
@@ -0,0 +1,30 @@
+import { withVuexStore } from 'storybook_addons/vuex_store';
+import DurationOverviewChart from './duration_overview_chart.vue';
+import { durationChartData } from './stories_constants';
+
+export default {
+  component: DurationOverviewChart,
+  title: 'ee/analytics/cycle_analytics/components/duration_overview_chart',
+  decorators: [withVuexStore],
+};
+
+const Template = (args, { argTypes, createVuexStore }) => ({
+  components: { DurationOverviewChart },
+  props: Object.keys(argTypes),
+  template: '<duration-overview-chart v-bind="$props" />',
+  store: createVuexStore({
+    modules: {
+      durationChart: {
+        namespaced: true,
+        getters: {
+          durationOverviewChartPlottableData: () => durationChartData,
+        },
+        state: {
+          isLoading: false,
+        },
+      },
+    },
+  }),
+});
+
+export const Default = Template.bind({});
diff --git a/ee/app/assets/javascripts/analytics/cycle_analytics/components/stories_constants.js b/ee/app/assets/javascripts/analytics/cycle_analytics/components/stories_constants.js
new file mode 100644
index 0000000000000000000000000000000000000000..1123cf0184b1aac6c604e7c48893b415d7eb5550
--- /dev/null
+++ b/ee/app/assets/javascripts/analytics/cycle_analytics/components/stories_constants.js
@@ -0,0 +1,183 @@
+export const selectedStage = {
+  title: 'Stage 1', // eslint-disable-line @gitlab/require-i18n-strings
+};
+
+export const selectedStageData = [
+  ['2023-09-06', null],
+  ['2023-09-07', null],
+  ['2023-09-08', null],
+  ['2023-09-09', null],
+  ['2023-09-10', null],
+  ['2023-09-11', null],
+  ['2023-09-12', null],
+  ['2023-09-13', null],
+  ['2023-09-14', null],
+  ['2023-09-15', null],
+  ['2023-09-16', null],
+  ['2023-09-17', null],
+  ['2023-09-18', null],
+  ['2023-09-19', null],
+  ['2023-09-20', null],
+  ['2023-09-21', 0],
+  ['2023-09-22', null],
+  ['2023-09-23', null],
+  ['2023-09-24', 0],
+  ['2023-09-25', 4],
+  ['2023-09-26', 4],
+  ['2023-09-27', 0],
+  ['2023-09-28', 0],
+  ['2023-09-29', null],
+  ['2023-09-30', 0],
+  ['2023-10-01', 0],
+  ['2023-10-02', 0],
+  ['2023-10-03', 11],
+  ['2023-10-04', 9],
+  ['2023-10-05', 7],
+];
+
+export const durationChartData = [
+  {
+    name: 'Stage 1', // eslint-disable-line @gitlab/require-i18n-strings
+    data: selectedStageData,
+  },
+  {
+    name: 'Stage 2', // eslint-disable-line @gitlab/require-i18n-strings
+    data: [
+      ['2023-09-06', null],
+      ['2023-09-07', null],
+      ['2023-09-08', null],
+      ['2023-09-09', null],
+      ['2023-09-10', null],
+      ['2023-09-11', null],
+      ['2023-09-12', null],
+      ['2023-09-13', null],
+      ['2023-09-14', null],
+      ['2023-09-15', null],
+      ['2023-09-16', null],
+      ['2023-09-17', null],
+      ['2023-09-18', null],
+      ['2023-09-19', null],
+      ['2023-09-20', null],
+      ['2023-09-21', 0],
+      ['2023-09-22', null],
+      ['2023-09-23', null],
+      ['2023-09-24', 3],
+      ['2023-09-25', 0],
+      ['2023-09-26', 0],
+      ['2023-09-27', 0],
+      ['2023-09-28', 6],
+      ['2023-09-29', null],
+      ['2023-09-30', 14],
+      ['2023-10-01', 0],
+      ['2023-10-02', 0],
+      ['2023-10-03', 0],
+      ['2023-10-04', 9],
+      ['2023-10-05', 3],
+    ],
+  },
+  {
+    name: 'Stage 3', // eslint-disable-line @gitlab/require-i18n-strings
+    data: [
+      ['2023-09-06', null],
+      ['2023-09-07', null],
+      ['2023-09-08', null],
+      ['2023-09-09', null],
+      ['2023-09-10', null],
+      ['2023-09-11', null],
+      ['2023-09-12', null],
+      ['2023-09-13', null],
+      ['2023-09-14', null],
+      ['2023-09-15', null],
+      ['2023-09-16', null],
+      ['2023-09-17', null],
+      ['2023-09-18', null],
+      ['2023-09-19', null],
+      ['2023-09-20', null],
+      ['2023-09-21', 0],
+      ['2023-09-22', null],
+      ['2023-09-23', null],
+      ['2023-09-24', 0],
+      ['2023-09-25', 0],
+      ['2023-09-26', 7],
+      ['2023-09-27', 2],
+      ['2023-09-28', 0],
+      ['2023-09-29', null],
+      ['2023-09-30', 9],
+      ['2023-10-01', 0],
+      ['2023-10-02', 0],
+      ['2023-10-03', 2],
+      ['2023-10-04', 17],
+      ['2023-10-05', 0],
+    ],
+  },
+  {
+    name: 'Stage 4', // eslint-disable-line @gitlab/require-i18n-strings
+    data: [
+      ['2023-09-06', null],
+      ['2023-09-07', null],
+      ['2023-09-08', null],
+      ['2023-09-09', null],
+      ['2023-09-10', null],
+      ['2023-09-11', null],
+      ['2023-09-12', null],
+      ['2023-09-13', null],
+      ['2023-09-14', null],
+      ['2023-09-15', null],
+      ['2023-09-16', null],
+      ['2023-09-17', null],
+      ['2023-09-18', null],
+      ['2023-09-19', null],
+      ['2023-09-20', null],
+      ['2023-09-21', 0],
+      ['2023-09-22', null],
+      ['2023-09-23', null],
+      ['2023-09-24', 0],
+      ['2023-09-25', 0],
+      ['2023-09-26', 0],
+      ['2023-09-27', 0],
+      ['2023-09-28', 0],
+      ['2023-09-29', null],
+      ['2023-09-30', 6],
+      ['2023-10-01', 4],
+      ['2023-10-02', 0],
+      ['2023-10-03', 1],
+      ['2023-10-04', 4],
+      ['2023-10-05', 3],
+    ],
+  },
+  {
+    name: 'Stage 5', // eslint-disable-line @gitlab/require-i18n-strings
+    data: [
+      ['2023-09-06', null],
+      ['2023-09-07', null],
+      ['2023-09-08', null],
+      ['2023-09-09', null],
+      ['2023-09-10', null],
+      ['2023-09-11', null],
+      ['2023-09-12', null],
+      ['2023-09-13', null],
+      ['2023-09-14', null],
+      ['2023-09-15', null],
+      ['2023-09-16', null],
+      ['2023-09-17', null],
+      ['2023-09-18', null],
+      ['2023-09-19', null],
+      ['2023-09-20', null],
+      ['2023-09-21', 5],
+      ['2023-09-22', null],
+      ['2023-09-23', null],
+      ['2023-09-24', 0],
+      ['2023-09-25', 0],
+      ['2023-09-26', 1],
+      ['2023-09-27', 0],
+      ['2023-09-28', 0],
+      ['2023-09-29', null],
+      ['2023-09-30', 0],
+      ['2023-10-01', 0],
+      ['2023-10-02', 7],
+      ['2023-10-03', 0],
+      ['2023-10-04', 0],
+      ['2023-10-05', 0],
+    ],
+  },
+];