diff --git a/lazy-timer-fe/src/components/Charts/Stacked.jsx b/lazy-timer-fe/src/components/Charts/Stacked.jsx
new file mode 100644
index 0000000..db45234
--- /dev/null
+++ b/lazy-timer-fe/src/components/Charts/Stacked.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, StackingColumnSeries, Tooltip } from '@syncfusion/ej2-react-charts';
+
+import { stackedCustomSeries, stackedPrimaryXAxis, stackedPrimaryYAxis } from '../../data/dummy';
+import { useStateContext } from '../../contexts/ContextProvider';
+
+const Stacked = ({ width, height }) => {
+  const { currentMode } = useStateContext();
+
+  return (
+    <ChartComponent
+      id="charts"
+      primaryXAxis={stackedPrimaryXAxis}
+      primaryYAxis={stackedPrimaryYAxis}
+      width={width}
+      height={height}
+      chartArea={{ border: { width: 0 } }}
+      tooltip={{ enable: true }}
+      background={currentMode === 'Dark' ? '#33373E' : '#fff'}
+      legendSettings={{ background: 'white' }}
+    >
+      <Inject services={[StackingColumnSeries, Category, Legend, Tooltip]} />
+      <SeriesCollectionDirective>
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        {stackedCustomSeries.map((item, index) => <SeriesDirective key={index} {...item} />)}
+      </SeriesCollectionDirective>
+    </ChartComponent>
+  );
+};
+
+export default Stacked;