diff --git a/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx b/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx
index 39291762b8fca..d9f68fe7ef890 100644
--- a/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx
+++ b/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx
@@ -426,7 +426,12 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = (props) => {
     <>
       {isBrushVisible && (
         <div className="aiopsHistogramBrushes" data-test-subj={'aiopsHistogramBrushes'}>
-          <div css={{ height: BADGE_HEIGHT }}>
+          {/**
+           * We need position:relative on this parent container of the BrushBadges,
+           * because of the absolute positioning of the BrushBadges. Without it, the
+           * BrushBadges would not be positioned correctly when used in embedded panels.
+           */}
+          <div css={{ height: BADGE_HEIGHT, position: 'relative' }}>
             <BrushBadge
               label={
                 baselineBrush.label ??