diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DailyActiveUsersChart.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DailyActiveUsersChart.tsx
index 484c33baa79..a75e3b4e5f2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DailyActiveUsersChart.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DailyActiveUsersChart.tsx
@@ -39,6 +39,7 @@ import {
 } from '../../utils/DataInsightUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 import './DataInsightDetail.less';
+import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
 
 interface Props {
   chartFilter: ChartFilter;
@@ -91,21 +92,25 @@ const DailyActiveUsersChart: FC<Props> = ({ chartFilter }) => {
           </Typography.Text>
         </>
       }>
-      <ResponsiveContainer debounce={1} minHeight={400}>
-        <LineChart
-          data={getFormattedActiveUsersData(dailyActiveUsers)}
-          margin={BAR_CHART_MARGIN}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="timestamp" />
-          <YAxis />
-          <Tooltip content={<CustomTooltip />} />
-          <Line
-            dataKey="activeUsers"
-            stroke={DATA_INSIGHT_GRAPH_COLORS[3]}
-            type="monotone"
-          />
-        </LineChart>
-      </ResponsiveContainer>
+      {dailyActiveUsers.length ? (
+        <ResponsiveContainer debounce={1} minHeight={400}>
+          <LineChart
+            data={getFormattedActiveUsersData(dailyActiveUsers)}
+            margin={BAR_CHART_MARGIN}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="timestamp" />
+            <YAxis />
+            <Tooltip content={<CustomTooltip />} />
+            <Line
+              dataKey="activeUsers"
+              stroke={DATA_INSIGHT_GRAPH_COLORS[3]}
+              type="monotone"
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      ) : (
+        <EmptyGraphPlaceholder />
+      )}
     </Card>
   );
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.tsx
index cba87079950..8453fbfca65 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.tsx
@@ -46,6 +46,7 @@ import {
 } from '../../utils/DataInsightUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 import './DataInsightDetail.less';
+import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
 
 interface Props {
   chartFilter: ChartFilter;
@@ -105,34 +106,40 @@ const DescriptionInsight: FC<Props> = ({ chartFilter }) => {
           </Typography.Text>
         </>
       }>
-      <ResponsiveContainer
-        debounce={1}
-        id="description-summary-graph"
-        minHeight={400}>
-        <BarChart data={data} margin={BAR_CHART_MARGIN}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="timestamp" />
+      {data.length ? (
+        <ResponsiveContainer
+          debounce={1}
+          id="description-summary-graph"
+          minHeight={400}>
+          <BarChart data={data} margin={BAR_CHART_MARGIN}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="timestamp" />
 
-          <YAxis />
-          <Tooltip content={<CustomTooltip isPercentage />} />
-          <Legend
-            align="left"
-            content={(props) => renderLegend(props as LegendProps, `${total}%`)}
-            layout="vertical"
-            verticalAlign="top"
-            wrapperStyle={{ left: '0px' }}
-          />
-          {entities.map((entity) => (
-            <Bar
-              barSize={BAR_SIZE}
-              dataKey={entity}
-              fill={ENTITIES_BAR_COLO_MAP[entity]}
-              key={uniqueId()}
-              stackId="description"
+            <YAxis />
+            <Tooltip content={<CustomTooltip isPercentage />} />
+            <Legend
+              align="left"
+              content={(props) =>
+                renderLegend(props as LegendProps, `${total}%`)
+              }
+              layout="vertical"
+              verticalAlign="top"
+              wrapperStyle={{ left: '0px' }}
             />
-          ))}
-        </BarChart>
-      </ResponsiveContainer>
+            {entities.map((entity) => (
+              <Bar
+                barSize={BAR_SIZE}
+                dataKey={entity}
+                fill={ENTITIES_BAR_COLO_MAP[entity]}
+                key={uniqueId()}
+                stackId="description"
+              />
+            ))}
+          </BarChart>
+        </ResponsiveContainer>
+      ) : (
+        <EmptyGraphPlaceholder />
+      )}
     </Card>
   );
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/EmptyGraphPlaceholder.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/EmptyGraphPlaceholder.tsx
new file mode 100644
index 00000000000..57d6dd79866
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/EmptyGraphPlaceholder.tsx
@@ -0,0 +1,16 @@
+import { Typography } from 'antd';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder';
+
+export const EmptyGraphPlaceholder = () => {
+  const { t } = useTranslation();
+
+  return (
+    <ErrorPlaceHolder>
+      <Typography.Text type="secondary">
+        {t('label.no-data-available')}
+      </Typography.Text>
+    </ErrorPlaceHolder>
+  );
+};
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPIChart.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPIChart.tsx
index e6c86758bee..d36fe96810f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPIChart.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPIChart.tsx
@@ -58,6 +58,7 @@ import {
 import { CustomTooltip, getKpiGraphData } from '../../utils/DataInsightUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 import './DataInsightDetail.less';
+import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
 import KPILatestResults from './KPILatestResults';
 
 interface Props {
@@ -204,34 +205,40 @@ const KPIChart: FC<Props> = ({ chartFilter }) => {
       }>
       {kpiList.length ? (
         <Row>
-          {!isUndefined(kpiLatestResults) && !isEmpty(kpiLatestResults) && (
-            <Col span={5}>
-              <KPILatestResults kpiLatestResultsRecord={kpiLatestResults} />
-            </Col>
-          )}
+          {graphData.length ? (
+            <>
+              {!isUndefined(kpiLatestResults) && !isEmpty(kpiLatestResults) && (
+                <Col span={5}>
+                  <KPILatestResults kpiLatestResultsRecord={kpiLatestResults} />
+                </Col>
+              )}
 
-          <Col span={19}>
-            <ResponsiveContainer debounce={1} minHeight={400}>
-              <LineChart data={graphData} margin={BAR_CHART_MARGIN}>
-                <CartesianGrid strokeDasharray="3 3" />
-                <XAxis dataKey="timestamp" />
-                <YAxis />
-                <Tooltip
-                  content={
-                    <CustomTooltip kpiTooltipRecord={kpiTooltipRecord} />
-                  }
-                />
-                {kpis.map((kpi, i) => (
-                  <Line
-                    dataKey={kpi}
-                    key={i}
-                    stroke={DATA_INSIGHT_GRAPH_COLORS[i]}
-                    type="monotone"
-                  />
-                ))}
-              </LineChart>
-            </ResponsiveContainer>
-          </Col>
+              <Col span={19}>
+                <ResponsiveContainer debounce={1} minHeight={400}>
+                  <LineChart data={graphData} margin={BAR_CHART_MARGIN}>
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="timestamp" />
+                    <YAxis />
+                    <Tooltip
+                      content={
+                        <CustomTooltip kpiTooltipRecord={kpiTooltipRecord} />
+                      }
+                    />
+                    {kpis.map((kpi, i) => (
+                      <Line
+                        dataKey={kpi}
+                        key={i}
+                        stroke={DATA_INSIGHT_GRAPH_COLORS[i]}
+                        type="monotone"
+                      />
+                    ))}
+                  </LineChart>
+                </ResponsiveContainer>
+              </Col>
+            </>
+          ) : (
+            <EmptyGraphPlaceholder />
+          )}
         </Row>
       ) : (
         <Space
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.tsx
index 08939737b30..d5b1b7c1c35 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.tsx
@@ -46,6 +46,7 @@ import {
 } from '../../utils/DataInsightUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 import './DataInsightDetail.less';
+import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
 
 interface Props {
   chartFilter: ChartFilter;
@@ -105,30 +106,36 @@ const OwnerInsight: FC<Props> = ({ chartFilter }) => {
           </Typography.Text>
         </>
       }>
-      <ResponsiveContainer debounce={1} minHeight={400}>
-        <BarChart data={data} margin={BAR_CHART_MARGIN}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="timestamp" />
-          <YAxis />
-          <Tooltip content={<CustomTooltip isPercentage />} />
-          <Legend
-            align="left"
-            content={(props) => renderLegend(props as LegendProps, `${total}%`)}
-            layout="vertical"
-            verticalAlign="top"
-            wrapperStyle={{ left: '0px' }}
-          />
-          {entities.map((entity) => (
-            <Bar
-              barSize={BAR_SIZE}
-              dataKey={entity}
-              fill={ENTITIES_BAR_COLO_MAP[entity]}
-              key={uniqueId()}
-              stackId="owner"
+      {data.length ? (
+        <ResponsiveContainer debounce={1} minHeight={400}>
+          <BarChart data={data} margin={BAR_CHART_MARGIN}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="timestamp" />
+            <YAxis />
+            <Tooltip content={<CustomTooltip isPercentage />} />
+            <Legend
+              align="left"
+              content={(props) =>
+                renderLegend(props as LegendProps, `${total}%`)
+              }
+              layout="vertical"
+              verticalAlign="top"
+              wrapperStyle={{ left: '0px' }}
             />
-          ))}
-        </BarChart>
-      </ResponsiveContainer>
+            {entities.map((entity) => (
+              <Bar
+                barSize={BAR_SIZE}
+                dataKey={entity}
+                fill={ENTITIES_BAR_COLO_MAP[entity]}
+                key={uniqueId()}
+                stackId="owner"
+              />
+            ))}
+          </BarChart>
+        </ResponsiveContainer>
+      ) : (
+        <EmptyGraphPlaceholder />
+      )}
     </Card>
   );
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/PageViewsByEntitiesChart.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/PageViewsByEntitiesChart.tsx
index 1aa34bd79b5..d61d896b97d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/PageViewsByEntitiesChart.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/PageViewsByEntitiesChart.tsx
@@ -44,6 +44,7 @@ import {
 } from '../../utils/DataInsightUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 import './DataInsightDetail.less';
+import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
 
 interface Props {
   chartFilter: ChartFilter;
@@ -102,30 +103,36 @@ const PageViewsByEntitiesChart: FC<Props> = ({ chartFilter }) => {
           </Typography.Text>
         </>
       }>
-      <ResponsiveContainer debounce={1} minHeight={400}>
-        <BarChart data={data} margin={BAR_CHART_MARGIN}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="timestamp" />
-          <YAxis />
-          <Tooltip content={<CustomTooltip />} />
-          <Legend
-            align="left"
-            content={(props) => renderLegend(props as LegendProps, `${total}`)}
-            layout="vertical"
-            verticalAlign="top"
-            wrapperStyle={{ left: '0px' }}
-          />
-          {entities.map((entity) => (
-            <Bar
-              barSize={BAR_SIZE}
-              dataKey={entity}
-              fill={ENTITIES_BAR_COLO_MAP[entity]}
-              key={uniqueId()}
-              stackId="entityCount"
+      {data.length ? (
+        <ResponsiveContainer debounce={1} minHeight={400}>
+          <BarChart data={data} margin={BAR_CHART_MARGIN}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="timestamp" />
+            <YAxis />
+            <Tooltip content={<CustomTooltip />} />
+            <Legend
+              align="left"
+              content={(props) =>
+                renderLegend(props as LegendProps, `${total}`)
+              }
+              layout="vertical"
+              verticalAlign="top"
+              wrapperStyle={{ left: '0px' }}
             />
-          ))}
-        </BarChart>
-      </ResponsiveContainer>
+            {entities.map((entity) => (
+              <Bar
+                barSize={BAR_SIZE}
+                dataKey={entity}
+                fill={ENTITIES_BAR_COLO_MAP[entity]}
+                key={uniqueId()}
+                stackId="entityCount"
+              />
+            ))}
+          </BarChart>
+        </ResponsiveContainer>
+      ) : (
+        <EmptyGraphPlaceholder />
+      )}
     </Card>
   );
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TierInsight.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TierInsight.tsx
index 2328adad433..3565342de67 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TierInsight.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TierInsight.tsx
@@ -46,6 +46,7 @@ import {
 } from '../../utils/DataInsightUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 import './DataInsightDetail.less';
+import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
 
 interface Props {
   chartFilter: ChartFilter;
@@ -101,30 +102,36 @@ const TierInsight: FC<Props> = ({ chartFilter }) => {
           </Typography.Text>
         </>
       }>
-      <ResponsiveContainer debounce={1} minHeight={400}>
-        <BarChart data={data} margin={BAR_CHART_MARGIN}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="timestamp" />
-          <YAxis />
-          <Tooltip content={<CustomTooltip />} />
-          <Legend
-            align="left"
-            content={(props) => renderLegend(props as LegendProps, `${total}`)}
-            layout="vertical"
-            verticalAlign="top"
-            wrapperStyle={{ left: '0px' }}
-          />
-          {tiers.map((tier) => (
-            <Bar
-              barSize={BAR_SIZE}
-              dataKey={tier}
-              fill={TIER_BAR_COLOR_MAP[tier]}
-              key={uniqueId()}
-              stackId="tier"
+      {data.length ? (
+        <ResponsiveContainer debounce={1} minHeight={400}>
+          <BarChart data={data} margin={BAR_CHART_MARGIN}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="timestamp" />
+            <YAxis />
+            <Tooltip content={<CustomTooltip />} />
+            <Legend
+              align="left"
+              content={(props) =>
+                renderLegend(props as LegendProps, `${total}`)
+              }
+              layout="vertical"
+              verticalAlign="top"
+              wrapperStyle={{ left: '0px' }}
             />
-          ))}
-        </BarChart>
-      </ResponsiveContainer>
+            {tiers.map((tier) => (
+              <Bar
+                barSize={BAR_SIZE}
+                dataKey={tier}
+                fill={TIER_BAR_COLOR_MAP[tier]}
+                key={uniqueId()}
+                stackId="tier"
+              />
+            ))}
+          </BarChart>
+        </ResponsiveContainer>
+      ) : (
+        <EmptyGraphPlaceholder />
+      )}
     </Card>
   );
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TotalEntityInsight.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TotalEntityInsight.tsx
index 35339a39e86..a3354d2c481 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TotalEntityInsight.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TotalEntityInsight.tsx
@@ -46,6 +46,7 @@ import {
 } from '../../utils/DataInsightUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 import './DataInsightDetail.less';
+import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
 
 interface Props {
   chartFilter: ChartFilter;
@@ -104,30 +105,36 @@ const TotalEntityInsight: FC<Props> = ({ chartFilter }) => {
           </Typography.Text>
         </>
       }>
-      <ResponsiveContainer debounce={1} minHeight={400}>
-        <BarChart data={data} margin={BAR_CHART_MARGIN}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="timestamp" />
-          <YAxis />
-          <Tooltip content={<CustomTooltip />} />
-          <Legend
-            align="left"
-            content={(props) => renderLegend(props as LegendProps, `${total}`)}
-            layout="vertical"
-            verticalAlign="top"
-            wrapperStyle={{ left: '0px' }}
-          />
-          {entities.map((entity) => (
-            <Bar
-              barSize={BAR_SIZE}
-              dataKey={entity}
-              fill={ENTITIES_BAR_COLO_MAP[entity]}
-              key={uniqueId()}
-              stackId="entityCount"
+      {data.length ? (
+        <ResponsiveContainer debounce={1} minHeight={400}>
+          <BarChart data={data} margin={BAR_CHART_MARGIN}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="timestamp" />
+            <YAxis />
+            <Tooltip content={<CustomTooltip />} />
+            <Legend
+              align="left"
+              content={(props) =>
+                renderLegend(props as LegendProps, `${total}`)
+              }
+              layout="vertical"
+              verticalAlign="top"
+              wrapperStyle={{ left: '0px' }}
             />
-          ))}
-        </BarChart>
-      </ResponsiveContainer>
+            {entities.map((entity) => (
+              <Bar
+                barSize={BAR_SIZE}
+                dataKey={entity}
+                fill={ENTITIES_BAR_COLO_MAP[entity]}
+                key={uniqueId()}
+                stackId="entityCount"
+              />
+            ))}
+          </BarChart>
+        </ResponsiveContainer>
+      ) : (
+        <EmptyGraphPlaceholder />
+      )}
     </Card>
   );
 };