diff --git a/x-pack/plugins/data_usage/public/app/components/chart_panel.tsx b/x-pack/plugins/data_usage/public/app/components/chart_panel.tsx
index 7554716c59492..31ae68244e982 100644
--- a/x-pack/plugins/data_usage/public/app/components/chart_panel.tsx
+++ b/x-pack/plugins/data_usage/public/app/components/chart_panel.tsx
@@ -16,6 +16,7 @@ import {
   niceTimeFormatter,
   DARK_THEME,
   LIGHT_THEME,
+  LineSeries,
 } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
 import { LegendAction } from './legend_action';
@@ -59,6 +60,18 @@ export const ChartPanel: React.FC<ChartPanelProps> = ({
     [minTimestamp, maxTimestamp]
   );
 
+  // Calculate the total for each time bucket
+  const totalSeries = useMemo(() => {
+    const totalsMap = new Map<number, number>();
+
+    series.forEach((stream) => {
+      stream.data.forEach((point) => {
+        totalsMap.set(point.x, (totalsMap.get(point.x) || 0) + point.y);
+      });
+    });
+
+    return Array.from(totalsMap.entries()).map(([x, y]) => ({ x, y }));
+  }, [series]);
   const renderLegendAction = useCallback(
     ({ label }: { label: string }) => {
       return (
@@ -87,6 +100,19 @@ export const ChartPanel: React.FC<ChartPanelProps> = ({
             xDomain={{ min: minTimestamp, max: maxTimestamp }}
             legendAction={renderLegendAction}
           />
+          <LineSeries
+            id="Total"
+            name="Total"
+            data={totalSeries}
+            xScaleType={ScaleType.Time}
+            yScaleType={ScaleType.Linear}
+            xAccessor="x"
+            yAccessors={['y']}
+            lineSeriesStyle={{
+              line: { strokeWidth: 2 },
+              point: { visible: 'always', radius: 5 },
+            }}
+          />
           {series.map((stream, streamIdx) => (
             <BarSeries
               key={streamIdx}