diff --git a/Common/UI/Components/Charts/Area/AreaChart.tsx b/Common/UI/Components/Charts/Area/AreaChart.tsx
index 5c153c873d..f43a8ee627 100644
--- a/Common/UI/Components/Charts/Area/AreaChart.tsx
+++ b/Common/UI/Components/Charts/Area/AreaChart.tsx
@@ -7,6 +7,7 @@ import ChartCurve from "../Types/ChartCurve";
 import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
 import DataPointUtil from "../Utils/DataPoint";
 import ChartReferenceLineProps from "../Types/ReferenceLineProps";
+import NoDataMessage from "../ChartGroup/NoDataMessage";
 
 export interface ComponentProps {
   data: Array<SeriesPoint>;
@@ -83,11 +84,7 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
         onValueChange={() => {}}
         referenceLines={props.referenceLines}
       />
-      {hasNoData && (
-        <div className="absolute inset-0 flex items-center justify-center">
-          <p className="text-sm text-gray-400">No data available</p>
-        </div>
-      )}
+      {hasNoData && <NoDataMessage />}
     </div>
   );
 };
diff --git a/Common/UI/Components/Charts/Bar/BarChart.tsx b/Common/UI/Components/Charts/Bar/BarChart.tsx
index 7e5f79a904..c75fc75a13 100644
--- a/Common/UI/Components/Charts/Bar/BarChart.tsx
+++ b/Common/UI/Components/Charts/Bar/BarChart.tsx
@@ -6,6 +6,7 @@ import YAxis from "../Types/YAxis/YAxis";
 import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
 import DataPointUtil from "../Utils/DataPoint";
 import ChartReferenceLineProps from "../Types/ReferenceLineProps";
+import NoDataMessage from "../ChartGroup/NoDataMessage";
 
 export interface ComponentProps {
   data: Array<SeriesPoint>;
@@ -78,11 +79,7 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
         onValueChange={() => {}}
         referenceLines={props.referenceLines}
       />
-      {hasNoData && (
-        <div className="absolute inset-0 flex items-center justify-center">
-          <p className="text-sm text-gray-400">No data available</p>
-        </div>
-      )}
+      {hasNoData && <NoDataMessage />}
     </div>
   );
 };
diff --git a/Common/UI/Components/Charts/ChartGroup/NoDataMessage.tsx b/Common/UI/Components/Charts/ChartGroup/NoDataMessage.tsx
new file mode 100644
index 0000000000..594da09f7b
--- /dev/null
+++ b/Common/UI/Components/Charts/ChartGroup/NoDataMessage.tsx
@@ -0,0 +1,13 @@
+import React, { FunctionComponent, ReactElement } from "react";
+
+const NoDataMessage: FunctionComponent = (): ReactElement => {
+  return (
+    <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+      <span className="text-sm text-gray-400 bg-white/90 border border-gray-100 rounded-full px-4 py-1.5 shadow-sm">
+        No data available
+      </span>
+    </div>
+  );
+};
+
+export default NoDataMessage;
diff --git a/Common/UI/Components/Charts/Line/LineChart.tsx b/Common/UI/Components/Charts/Line/LineChart.tsx
index 0ed95f5330..e1db306b04 100644
--- a/Common/UI/Components/Charts/Line/LineChart.tsx
+++ b/Common/UI/Components/Charts/Line/LineChart.tsx
@@ -7,6 +7,7 @@ import ChartCurve from "../Types/ChartCurve";
 import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
 import DataPointUtil from "../Utils/DataPoint";
 import ChartReferenceLineProps from "../Types/ReferenceLineProps";
+import NoDataMessage from "../ChartGroup/NoDataMessage";
 
 export interface ComponentProps {
   data: Array<SeriesPoint>;
@@ -82,11 +83,7 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
         onValueChange={() => {}}
         referenceLines={props.referenceLines}
       />
-      {hasNoData && (
-        <div className="absolute inset-0 flex items-center justify-center">
-          <p className="text-sm text-gray-400">No data available</p>
-        </div>
-      )}
+      {hasNoData && <NoDataMessage />}
     </div>
   );
 };