diff --git a/src/components/pages/dashboard/chart/DashboardLineChart.tsx b/src/components/pages/dashboard/chart/DashboardLineChart.tsx
index e586b4a3..348f6c43 100644
--- a/src/components/pages/dashboard/chart/DashboardLineChart.tsx
+++ b/src/components/pages/dashboard/chart/DashboardLineChart.tsx
@@ -283,261 +283,311 @@ const DashboardLineChart = ({
         })()}
       </div>
 
-      {/* Chart */}
-      <ResponsiveContainer width='100%' height={350}>
-        <LineChart
-          data={(() => {
-            // Transform data based on analysisMode
-            if (analysisMode === 'OVERVIEW') {
-              // For OVERVIEW mode, use the selected chart data
-              if (isOverviewCharts(data.charts)) {
-                const selectedChartData = data.charts[chartData];
-                if (!selectedChartData || !selectedChartData.dataset) return [];
-                return selectedChartData.dataset;
+      {/* Chart Container with Empty State Overlay */}
+      <div className='relative'>
+        {/* Chart */}
+        <ResponsiveContainer width='100%' height={350}>
+          <LineChart
+            data={(() => {
+              // Transform data based on analysisMode
+              if (analysisMode === 'OVERVIEW') {
+                // For OVERVIEW mode, use the selected chart data
+                if (isOverviewCharts(data.charts)) {
+                  const selectedChartData = data.charts[chartData];
+                  if (!selectedChartData || !selectedChartData.dataset)
+                    return [];
+                  return selectedChartData.dataset;
+                }
+                return [];
+              } else {
+                // For COMPARISON mode, use the first available comparison chart
+                if (isComparisonCharts(data.charts)) {
+                  const chartData =
+                    data.charts.location ||
+                    data.charts.flock ||
+                    data.charts.kandang;
+
+                  if (!chartData || !chartData.dataset) return [];
+                  return chartData.dataset;
+                }
+                return [];
               }
-              return [];
-            } else {
-              // For COMPARISON mode, use the first available comparison chart
-              if (isComparisonCharts(data.charts)) {
-                const chartData =
-                  data.charts.location ||
-                  data.charts.flock ||
-                  data.charts.kandang;
-
-                if (!chartData || !chartData.dataset) return [];
-                return chartData.dataset;
-              }
-              return [];
-            }
-          })()}
-          margin={{
-            top: 5,
-            right: 10,
-            left: 0,
-            bottom: 5,
-          }}
-        >
-          <CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
-          <XAxis
-            dataKey='week'
-            tick={{ fontSize: 11, fill: '#9ca3af' }}
-            tickLine={false}
-            axisLine={{ stroke: '#e5e7eb' }}
-            label={{
-              value: 'Weeks',
-              position: 'insideBottom',
-              offset: -5,
-              style: { fontSize: 12, fill: '#9ca3af' },
-            }}
-          />
-          <YAxis
-            tick={{ fontSize: 11, fill: '#9ca3af' }}
-            tickLine={false}
-            axisLine={{ stroke: '#e5e7eb' }}
-            domain={(() => {
-              // Calculate dynamic domain based on visible data
-              let seriesData: DashboardChartsSeries[] = [];
-              let dataset: DashboardChartsDataset[] = [];
-
-              if (
-                analysisMode === 'OVERVIEW' &&
-                isOverviewCharts(data.charts)
-              ) {
-                seriesData = data.charts[chartData]?.series || [];
-                dataset = data.charts[chartData]?.dataset || [];
-              } else if (
-                analysisMode === 'COMPARISON' &&
-                isComparisonCharts(data.charts)
-              ) {
-                const comparisonChart =
-                  data.charts.location ||
-                  data.charts.flock ||
-                  data.charts.kandang;
-                seriesData = comparisonChart?.series || [];
-                dataset = comparisonChart?.dataset || [];
-              }
-
-              // Get all values from visible series
-              const visibleSeriesIds = Array.from(visibleSeries);
-              const allValues: number[] = [];
-
-              dataset.forEach((item: DashboardChartsDataset) => {
-                visibleSeriesIds.forEach((seriesId) => {
-                  const value = item[seriesId];
-                  if (typeof value === 'number') {
-                    allValues.push(value);
-                  }
-                });
-              });
-
-              if (allValues.length === 0) return [0, 100];
-
-              const minValue = Math.min(...allValues);
-              const maxValue = Math.max(...allValues);
-
-              // Add padding (10% on each side)
-              const padding = (maxValue - minValue) * 0.1;
-              const domainMin = Math.floor(Math.max(0, minValue - padding));
-              const domainMax = Math.ceil(maxValue + padding);
-
-              return [domainMin, domainMax];
             })()}
-            ticks={(() => {
-              // Calculate dynamic ticks based on domain
-              let seriesData: DashboardChartsSeries[] = [];
-              let dataset: DashboardChartsDataset[] = [];
-
-              if (
-                analysisMode === 'OVERVIEW' &&
-                isOverviewCharts(data.charts)
-              ) {
-                seriesData = data.charts[chartData]?.series || [];
-                dataset = data.charts[chartData]?.dataset || [];
-              } else if (
-                analysisMode === 'COMPARISON' &&
-                isComparisonCharts(data.charts)
-              ) {
-                const comparisonChart =
-                  data.charts.location ||
-                  data.charts.flock ||
-                  data.charts.kandang;
-                seriesData = comparisonChart?.series || [];
-                dataset = comparisonChart?.dataset || [];
-              }
-
-              const visibleSeriesIds = Array.from(visibleSeries);
-              const allValues: number[] = [];
-
-              dataset.forEach((item: DashboardChartsDataset) => {
-                visibleSeriesIds.forEach((seriesId) => {
-                  const value = item[seriesId];
-                  if (typeof value === 'number') {
-                    allValues.push(value);
-                  }
-                });
-              });
-
-              if (allValues.length === 0) return [0, 25, 50, 75, 100];
-
-              const minValue = Math.min(...allValues);
-              const maxValue = Math.max(...allValues);
-              const padding = (maxValue - minValue) * 0.1;
-              const domainMin = Math.floor(Math.max(0, minValue - padding));
-              const domainMax = Math.ceil(maxValue + padding);
-
-              // Generate 5 evenly spaced ticks
-              const range = domainMax - domainMin;
-              const step = range / 4;
-
-              return [
-                domainMin,
-                Math.round(domainMin + step),
-                Math.round(domainMin + step * 2),
-                Math.round(domainMin + step * 3),
-                domainMax,
-              ];
-            })()}
-          />
-          <Tooltip
-            contentStyle={{
-              backgroundColor: '#1f2937',
-              border: 'none',
-              borderRadius: '8px',
-              padding: '8px 12px',
-              color: 'white',
+            margin={{
+              top: 5,
+              right: 10,
+              left: 0,
+              bottom: 5,
             }}
-            labelStyle={{ color: 'white', marginBottom: '4px' }}
-            itemStyle={{ color: 'white', fontSize: '12px' }}
-            labelFormatter={(value) => `Week ${value}`}
-            formatter={(
-              value: number | undefined,
-              name: string | undefined
-            ) => {
-              if (value === undefined || name === undefined) return ['', ''];
+          >
+            <CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
+            <XAxis
+              dataKey='week'
+              tick={{ fontSize: 11, fill: '#9ca3af' }}
+              tickLine={false}
+              axisLine={{ stroke: '#e5e7eb' }}
+              label={{
+                value: 'Weeks',
+                position: 'insideBottom',
+                offset: -5,
+                style: { fontSize: 12, fill: '#9ca3af' },
+              }}
+            />
+            <YAxis
+              tick={{ fontSize: 11, fill: '#9ca3af' }}
+              tickLine={false}
+              axisLine={{ stroke: '#e5e7eb' }}
+              domain={(() => {
+                // Calculate dynamic domain based on visible data
+                let seriesData: DashboardChartsSeries[] = [];
+                let dataset: DashboardChartsDataset[] = [];
 
-              // Get series data to find the unit
-              let seriesData: DashboardChartsSeries[] = [];
-              if (
-                analysisMode === 'OVERVIEW' &&
-                isOverviewCharts(data.charts)
-              ) {
-                seriesData = data.charts[chartData]?.series || [];
-              } else if (
-                analysisMode === 'COMPARISON' &&
-                isComparisonCharts(data.charts)
-              ) {
-                const comparisonChart =
-                  data.charts.location ||
-                  data.charts.flock ||
-                  data.charts.kandang;
-                seriesData = comparisonChart?.series || [];
-              }
+                if (
+                  analysisMode === 'OVERVIEW' &&
+                  isOverviewCharts(data.charts)
+                ) {
+                  seriesData = data.charts[chartData]?.series || [];
+                  dataset = data.charts[chartData]?.dataset || [];
+                } else if (
+                  analysisMode === 'COMPARISON' &&
+                  isComparisonCharts(data.charts)
+                ) {
+                  const comparisonChart =
+                    data.charts.location ||
+                    data.charts.flock ||
+                    data.charts.kandang;
+                  seriesData = comparisonChart?.series || [];
+                  dataset = comparisonChart?.dataset || [];
+                }
 
-              // Find the series that matches this line's name
-              const series = seriesData.find((s) => s.label === name);
-              const unit = series?.unit || '';
+                // Get all values from visible series
+                const visibleSeriesIds = Array.from(visibleSeries);
+                const allValues: number[] = [];
 
-              return [`${value} ${unit}`, name];
-            }}
-          />
-          {/* Dynamic Line rendering based on visible series */}
-          {(() => {
-            let seriesData: DashboardChartsSeries[] = [];
-
-            if (analysisMode === 'OVERVIEW' && isOverviewCharts(data.charts)) {
-              seriesData = data.charts[chartData]?.series || [];
-            } else if (
-              analysisMode === 'COMPARISON' &&
-              isComparisonCharts(data.charts)
-            ) {
-              const comparisonChart =
-                data.charts.location ||
-                data.charts.flock ||
-                data.charts.kandang;
-              seriesData = comparisonChart?.series || [];
-            }
-
-            return seriesData
-              .filter((series) => visibleSeries.has(series.id))
-              .map((series, index) => {
-                const isStandard = series.id
-                  .toString()
-                  .toLowerCase()
-                  .includes('std');
-                // Use series.id directly as dataKey to match dataset fields
-                const dataKey = series.id.toString();
-
-                return (
-                  <Line
-                    key={series.id}
-                    type='monotone'
-                    dataKey={dataKey}
-                    name={series.label}
-                    stroke={getLineColor(series.id, index, analysisMode)}
-                    opacity={isStandard ? 0.5 : 1}
-                    strokeWidth={2}
-                    strokeDasharray={isStandard ? '5 5' : undefined}
-                    dot={
-                      isStandard
-                        ? false
-                        : {
-                            r: 3,
-                            fill: '#fff',
-                            stroke: getLineColor(
-                              series.id,
-                              index,
-                              analysisMode
-                            ),
-                            strokeWidth: 2,
-                          }
+                dataset.forEach((item: DashboardChartsDataset) => {
+                  visibleSeriesIds.forEach((seriesId) => {
+                    const value = item[seriesId];
+                    if (typeof value === 'number') {
+                      allValues.push(value);
                     }
-                    activeDot={isStandard ? undefined : { r: 5 }}
+                  });
+                });
+
+                if (allValues.length === 0) return [0, 100];
+
+                const minValue = Math.min(...allValues);
+                const maxValue = Math.max(...allValues);
+
+                // Add padding (10% on each side)
+                const padding = (maxValue - minValue) * 0.1;
+                const domainMin = Math.floor(Math.max(0, minValue - padding));
+                const domainMax = Math.ceil(maxValue + padding);
+
+                return [domainMin, domainMax];
+              })()}
+              ticks={(() => {
+                // Calculate dynamic ticks based on domain
+                let seriesData: DashboardChartsSeries[] = [];
+                let dataset: DashboardChartsDataset[] = [];
+
+                if (
+                  analysisMode === 'OVERVIEW' &&
+                  isOverviewCharts(data.charts)
+                ) {
+                  seriesData = data.charts[chartData]?.series || [];
+                  dataset = data.charts[chartData]?.dataset || [];
+                } else if (
+                  analysisMode === 'COMPARISON' &&
+                  isComparisonCharts(data.charts)
+                ) {
+                  const comparisonChart =
+                    data.charts.location ||
+                    data.charts.flock ||
+                    data.charts.kandang;
+                  seriesData = comparisonChart?.series || [];
+                  dataset = comparisonChart?.dataset || [];
+                }
+
+                const visibleSeriesIds = Array.from(visibleSeries);
+                const allValues: number[] = [];
+
+                dataset.forEach((item: DashboardChartsDataset) => {
+                  visibleSeriesIds.forEach((seriesId) => {
+                    const value = item[seriesId];
+                    if (typeof value === 'number') {
+                      allValues.push(value);
+                    }
+                  });
+                });
+
+                if (allValues.length === 0) return [0, 25, 50, 75, 100];
+
+                const minValue = Math.min(...allValues);
+                const maxValue = Math.max(...allValues);
+                const padding = (maxValue - minValue) * 0.1;
+                const domainMin = Math.floor(Math.max(0, minValue - padding));
+                const domainMax = Math.ceil(maxValue + padding);
+
+                // Generate 5 evenly spaced ticks
+                const range = domainMax - domainMin;
+                const step = range / 4;
+
+                return [
+                  domainMin,
+                  Math.round(domainMin + step),
+                  Math.round(domainMin + step * 2),
+                  Math.round(domainMin + step * 3),
+                  domainMax,
+                ];
+              })()}
+            />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: '#1f2937',
+                border: 'none',
+                borderRadius: '8px',
+                padding: '8px 12px',
+                color: 'white',
+              }}
+              labelStyle={{ color: 'white', marginBottom: '4px' }}
+              itemStyle={{ color: 'white', fontSize: '12px' }}
+              labelFormatter={(value) => `Week ${value}`}
+              formatter={(
+                value: number | undefined,
+                name: string | undefined
+              ) => {
+                if (value === undefined || name === undefined) return ['', ''];
+
+                // Get series data to find the unit
+                let seriesData: DashboardChartsSeries[] = [];
+                if (
+                  analysisMode === 'OVERVIEW' &&
+                  isOverviewCharts(data.charts)
+                ) {
+                  seriesData = data.charts[chartData]?.series || [];
+                } else if (
+                  analysisMode === 'COMPARISON' &&
+                  isComparisonCharts(data.charts)
+                ) {
+                  const comparisonChart =
+                    data.charts.location ||
+                    data.charts.flock ||
+                    data.charts.kandang;
+                  seriesData = comparisonChart?.series || [];
+                }
+
+                // Find the series that matches this line's name
+                const series = seriesData.find((s) => s.label === name);
+                const unit = series?.unit || '';
+
+                return [`${value} ${unit}`, name];
+              }}
+            />
+            {/* Dynamic Line rendering based on visible series */}
+            {(() => {
+              let seriesData: DashboardChartsSeries[] = [];
+
+              if (
+                analysisMode === 'OVERVIEW' &&
+                isOverviewCharts(data.charts)
+              ) {
+                seriesData = data.charts[chartData]?.series || [];
+              } else if (
+                analysisMode === 'COMPARISON' &&
+                isComparisonCharts(data.charts)
+              ) {
+                const comparisonChart =
+                  data.charts.location ||
+                  data.charts.flock ||
+                  data.charts.kandang;
+                seriesData = comparisonChart?.series || [];
+              }
+
+              return seriesData
+                .filter((series) => visibleSeries.has(series.id))
+                .map((series, index) => {
+                  const isStandard = series.id
+                    .toString()
+                    .toLowerCase()
+                    .includes('std');
+                  // Use series.id directly as dataKey to match dataset fields
+                  const dataKey = series.id.toString();
+
+                  return (
+                    <Line
+                      key={series.id}
+                      type='monotone'
+                      dataKey={dataKey}
+                      name={series.label}
+                      stroke={getLineColor(series.id, index, analysisMode)}
+                      opacity={isStandard ? 0.5 : 1}
+                      strokeWidth={2}
+                      strokeDasharray={isStandard ? '5 5' : undefined}
+                      dot={
+                        isStandard
+                          ? false
+                          : {
+                              r: 3,
+                              fill: '#fff',
+                              stroke: getLineColor(
+                                series.id,
+                                index,
+                                analysisMode
+                              ),
+                              strokeWidth: 2,
+                            }
+                      }
+                      activeDot={isStandard ? undefined : { r: 5 }}
+                    />
+                  );
+                });
+            })()}
+          </LineChart>
+        </ResponsiveContainer>
+
+        {/* Empty State Overlay */}
+        {(() => {
+          // Get current dataset
+          let dataset: DashboardChartsDataset[] = [];
+
+          if (analysisMode === 'OVERVIEW' && isOverviewCharts(data.charts)) {
+            dataset = data.charts[chartData]?.dataset || [];
+          } else if (
+            analysisMode === 'COMPARISON' &&
+            isComparisonCharts(data.charts)
+          ) {
+            const comparisonChart =
+              data.charts.location || data.charts.flock || data.charts.kandang;
+            dataset = comparisonChart?.dataset || [];
+          }
+
+          // Show empty state if dataset is empty
+          if (dataset.length === 0) {
+            return (
+              <div className='absolute inset-x-0 inset-y-15 z-10 flex flex-col items-center justify-center rounded-lg'>
+                {/* Chart icon */}
+                <div className='w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-4'>
+                  <Icon
+                    icon='heroicons:chart-bar'
+                    className='text-white'
+                    width={24}
+                    height={24}
                   />
-                );
-              });
-          })()}
-        </LineChart>
-      </ResponsiveContainer>
+                </div>
+
+                {/* Empty state text */}
+                <h3 className='text-gray-900 font-semibold text-base mb-2'>
+                  Data Not Yet Available
+                </h3>
+                <p className='text-gray-500 text-sm text-center max-w-xs'>
+                  Please change your filters to get the data.
+                </p>
+              </div>
+            );
+          }
+          return null;
+        })()}
+      </div>
     </Card>
   );
 };