diff --git a/package.json b/package.json
index c0031dbe..58769b0b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netdata/charts",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "description": "Netdata frontend SDK and chart utilities",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",
diff --git a/src/components/groupBoxes/drawBoxes.js b/src/components/groupBoxes/drawBoxes.js
index aa31be1a..633159ea 100644
--- a/src/components/groupBoxes/drawBoxes.js
+++ b/src/components/groupBoxes/drawBoxes.js
@@ -151,5 +151,6 @@ export default (chart, el, { onMouseenter, onMouseout }, options = {}) => {
     update,
     activateBox: index => activateBox(index),
     deactivateBox: () => deactivateBox(),
+    getElement: () => backgroundEl,
   }
 }
diff --git a/src/components/groupBoxes/footer/legend.js b/src/components/groupBoxes/footer/legend.js
index a660c4b7..76c656dc 100644
--- a/src/components/groupBoxes/footer/legend.js
+++ b/src/components/groupBoxes/footer/legend.js
@@ -29,11 +29,11 @@ const Legend = () => {
   const maxColor = chart.getThemeAttribute("themeGroupBoxesMax")
 
   return (
-    <Flex data-testid="groupBox-legend" gap={4} alignItems="center">
+    <Flex data-testid="groupBox-legend" gap={4} alignItems="center" width="100%">
       <TextNano strong>
         {selectedContexts && selectedContexts !== "*" ? selectedContexts : contextScope}
       </TextNano>
-      <Flex gap={2} alignItems="center">
+      <Flex gap={2} alignItems="center" width="100%">
         <TextNano>
           {chart.getConvertedValue(min)} {units}
         </TextNano>
diff --git a/src/components/groupBoxes/groupBoxes.js b/src/components/groupBoxes/groupBoxes.js
index aa20b849..673b1aed 100644
--- a/src/components/groupBoxes/groupBoxes.js
+++ b/src/components/groupBoxes/groupBoxes.js
@@ -1,4 +1,4 @@
-import React, { memo } from "react"
+import React, { memo, useRef } from "react"
 import styled, { keyframes } from "styled-components"
 import { Box, Flex, TextMicro } from "@netdata/netdata-ui"
 import { useLoadingColor, useAttributeValue, useColor } from "@/components/provider"
@@ -78,6 +78,7 @@ const GroupBoxWrapper = ({ uiName, subTree, data, label, groupedBy, hasMore }) =
 
 const GroupBoxes = ({ uiName }) => {
   const { data, tree } = useGroupBox(uiName)
+  const ref = useRef()
 
   const loaded = useAttributeValue("loaded")
   const showingInfo = useAttributeValue("showingInfo")
@@ -88,7 +89,14 @@ const GroupBoxes = ({ uiName }) => {
   if (!loaded) return <SkeletonIcon />
 
   return (
-    <Flex data-testid="groupBoxes" flexWrap flex position="relative" height={{ min: "150px" }}>
+    <Flex
+      data-testid="groupBoxes"
+      flexWrap
+      flex
+      position="relative"
+      height={{ min: "150px" }}
+      ref={ref}
+    >
       {showingInfo ? (
         <Details />
       ) : rest.length ? (
diff --git a/src/components/line/resize/index.js b/src/components/line/resize/index.js
deleted file mode 100644
index c5cca85a..00000000
--- a/src/components/line/resize/index.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { memo } from "react"
-import styled from "styled-components"
-import resizeHandler from "@netdata/netdata-ui/dist/components/icon/assets/resize_handler.svg"
-import { useChart } from "@/components/provider"
-import Icon from "@/components/icon"
-
-const Drag = styled(Icon).attrs({
-  color: "textLite",
-  hoverColor: "textDescription",
-  svg: resizeHandler,
-  size: "16px",
-  alignSelf: "end",
-})`
-  cursor: ${props => props.cursor};
-`
-
-const onDoubleClick = event => {
-  event.preventDefault()
-  event.stopPropagation()
-}
-
-const Resize = props => {
-  const chart = useChart()
-
-  const onDragStart = event => {
-    event.preventDefault()
-    chart.trigger("resizeStart")
-    const eventStartHeight = event.type === "touchstart" ? event.touches[0].clientY : event.clientY
-    const eventStartWidth = event.type === "touchstart" ? event.touches[0].clientX : event.clientX
-
-    const setResize = (currentHeight, currentWidth) => {
-      const diffY = currentHeight - eventStartHeight
-      const diffX = currentWidth - eventStartWidth
-
-      chart.trigger("resizeMove", diffY, diffX)
-    }
-
-    const onMouseMove = e => setResize(e.clientY, e.clientX)
-    const onTouchMove = e => setResize(e.touches[0].clientY, e.touches[0].clientX)
-
-    const onMouseEnd = () => {
-      document.removeEventListener("mousemove", onMouseMove)
-      document.removeEventListener("mouseup", onMouseEnd)
-      chart.trigger("resizeEnd")
-    }
-
-    const onTouchEnd = () => {
-      document.removeEventListener("touchmove", onTouchMove)
-      document.removeEventListener("touchend", onTouchEnd)
-      chart.trigger("resizeEnd")
-    }
-
-    if (event.type === "touchstart") {
-      document.addEventListener("touchmove", onTouchMove)
-      document.addEventListener("touchend", onTouchEnd)
-    } else {
-      document.addEventListener("mousemove", onMouseMove)
-      document.addEventListener("mouseup", onMouseEnd)
-    }
-  }
-
-  return (
-    <Drag
-      onDoubleClick={onDoubleClick}
-      onMouseDown={onDragStart}
-      onTouchStart={onDragStart}
-      alignSelf="end"
-      {...props}
-    />
-  )
-}
-
-export default memo(Resize)