diff --git a/.storybook/preview.js b/.storybook/preview.js
index 3f8aab7e..f7aee6d3 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -22,16 +22,8 @@ const preview = {
       return (
         <ThemeProvider theme={theme}>
           <GlobalStyles />
-          <Flex
-            width="100vw"
-            height="100vh"
-            background="mainBackground"
-            alignItems="center"
-            justifyContent="center"
-          >
-            <Flex>
-              <Story />
-            </Flex>
+          <Flex width="100vw" height="100vh" background="mainBackground" overflow="auto">
+            <Story />
           </Flex>
         </ThemeProvider>
       )
diff --git a/package.json b/package.json
index b2a146d1..1c5835ad 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netdata/charts",
-  "version": "4.3.0",
+  "version": "4.3.1",
   "description": "Netdata frontend SDK and chart utilities",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",
diff --git a/src/agentv2.stories.js b/src/agentv2.stories.js
index 5e63ce25..bf867f17 100644
--- a/src/agentv2.stories.js
+++ b/src/agentv2.stories.js
@@ -1,6 +1,5 @@
 import React from "react"
-import { ThemeProvider } from "styled-components"
-import { Flex, DefaultTheme, DarkTheme } from "@netdata/netdata-ui"
+import { Flex } from "@netdata/netdata-ui"
 import Line from "@/components/line"
 import GaugeComponent from "@/components/gauge"
 import EasyPieComponent from "@/components/easyPie"
@@ -167,24 +166,22 @@ export const Chart = ({ nodesScope, contextScope, contexts, host, theme, singleD
   sdk.appendChild(chart10)
 
   return (
-    <ThemeProvider theme={theme === "default" ? DefaultTheme : DarkTheme}>
-      <Flex background="mainBackground" column gap={2} padding={[3]}>
-        <Flex height={50} gap={2}>
-          <EasyPieComponent chart={chart2} />
-          <GaugeComponent chart={chart3} />
-          <NumberComponent chart={chart5} />
-          <D3pieComponent chart={chart6} />
-        </Flex>
-        <Flex height={50} gap={2}>
-          <D3pieComponent chart={chart8} />
-          <D3pieComponent chart={chart9} />
-          <BarsComponent chart={chart10} />
-        </Flex>
-        <Line chart={chart} height="315px" width="100%" />
-        <Line chart={chart7} height="315px" width="100%" />
-        <GroupBoxes chart={chart4} />
+    <Flex background="mainBackground" column gap={2} padding={[3]} overflow="auto">
+      <Flex height={50} width="100%" gap={2}>
+        <EasyPieComponent chart={chart2} height="100px" />
+        <GaugeComponent chart={chart3} height="100px" />
+        <NumberComponent chart={chart5} height="100px" />
+        <D3pieComponent chart={chart6} height="100px" />
       </Flex>
-    </ThemeProvider>
+      <Flex height={50} width="100%" gap={2}>
+        <D3pieComponent chart={chart8} height="100px" />
+        <D3pieComponent chart={chart9} height="100px" />
+        <BarsComponent chart={chart10} height="100px" />
+      </Flex>
+      <Line chart={chart} height="315px" width="100%" />
+      <Line chart={chart7} height="315px" width="100%" />
+      <GroupBoxes chart={chart4} />
+    </Flex>
   )
 }
 
diff --git a/src/components/hocs/withChart.js b/src/components/hocs/withChart.js
index 40f0d10b..332616af 100644
--- a/src/components/hocs/withChart.js
+++ b/src/components/hocs/withChart.js
@@ -3,7 +3,6 @@ import { withChartProvider } from "@/components/provider"
 import withChartTrack from "./withChartTrack"
 import withFullscreen from "./withFullscreen"
 import withDeferredMount from "./withDeferredMount"
-import withResize from "./withResize"
 import withTile from "./withTile"
 
 export default (Component, options = {}) => {
diff --git a/src/components/hocs/withFullscreen.js b/src/components/hocs/withFullscreen.js
index dd3cf51f..32eb0e1c 100644
--- a/src/components/hocs/withFullscreen.js
+++ b/src/components/hocs/withFullscreen.js
@@ -11,7 +11,7 @@ export default Component => {
     return (
       <Layer full>
         <Flex background="mainBackground" flex width={{ max: "inherit" }} padding={[4]}>
-          <Component {...props} ref={ref} />
+          <Component {...props} height="100%" ref={ref} />
         </Flex>
       </Layer>
     )
diff --git a/src/components/hocs/withResize.js b/src/components/hocs/withResize.js
deleted file mode 100644
index 9ad0965b..00000000
--- a/src/components/hocs/withResize.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import React, { useRef, memo, useLayoutEffect } from "react"
-import { useChart } from "@/components/provider"
-import { unregister } from "@/helpers/makeListeners"
-
-export default Component => {
-  const HeightComponent = ({
-    height: defaultHeight = "100%",
-    width: defaultWidth = "100%",
-    flex = true,
-    ...rest
-  }) => {
-    const chart = useChart()
-    const ref = useRef()
-
-    const height =
-      (chart.getAttribute("enabledHeightResize") && chart.getAttribute("height")) || defaultHeight
-    const width =
-      (chart.getAttribute("enabledWidthResize") && chart.getAttribute("width")) || defaultWidth
-
-    useLayoutEffect(() => {
-      let initialHeight = 0
-      let initialWidth = 0
-
-      return unregister(
-        chart
-          .on("resizeStart", () => {
-            initialHeight = ref.current.clientHeight
-            initialWidth = ref.current.clientWidth
-          })
-          .on("resizeMove", (deltaY, deltaX) => {
-            const nextHeight = deltaY ? initialHeight + deltaY : initialHeight
-            const nextWidth = deltaX ? initialWidth + deltaX : initialWidth
-
-            let resized = false
-
-            if (
-              chart.getAttribute("enabledHeightResize") &&
-              nextHeight > 185 &&
-              nextHeight !== initialHeight
-            ) {
-              const nextHeightAttribute = `${nextHeight}px`
-              ref.current.style.height = nextHeightAttribute
-              resized = true
-            }
-
-            if (
-              chart.getAttribute("enabledWidthResize") &&
-              nextWidth > 185 &&
-              nextWidth !== initialWidth
-            ) {
-              const nextWidthAttribute = `${nextWidth}px`
-              ref.current.style.width = nextWidthAttribute
-              resized = true
-            }
-
-            if (resized) chart.getUI().trigger("resizing")
-          })
-          .on("resizeEnd", () => {
-            chart.updateSize(ref.current.clientHeight, ref.current.clientWidth)
-            chart.getUI().trigger("resize")
-          }),
-        chart.onAttributeChange("expanded", expanded => {
-          chart.trigger("resizeStart")
-          chart.trigger(
-            "resizeEnd",
-            expanded ? chart.getAttribute("expandedHeight") : -chart.getAttribute("expandedHeight"),
-            0
-          )
-          chart.trigger("resizeEnd")
-        })
-      )
-    }, [chart])
-
-    return <Component ref={ref} height={height} width={width} flex={flex} {...rest} />
-  }
-
-  return memo(HeightComponent)
-}
diff --git a/src/components/hocs/withTile.js b/src/components/hocs/withTile.js
index 1a366c1c..926ea6c3 100644
--- a/src/components/hocs/withTile.js
+++ b/src/components/hocs/withTile.js
@@ -111,7 +111,7 @@ export const HeadWrapper = ({ children, uiName, ...rest }) => {
               column
               height="100%"
               width="2px"
-              background="nodeBadgeBackground"
+              background="neutralHighlight"
               justifyContent="end"
             >
               <ColorBar
diff --git a/src/components/icon/button.js b/src/components/icon/button.js
index 62c0fd77..64307422 100644
--- a/src/components/icon/button.js
+++ b/src/components/icon/button.js
@@ -1,5 +1,5 @@
 import styled from "styled-components"
-import { getColor } from "@netdata/netdata-ui"
+import { getColor, cursor } from "@netdata/netdata-ui"
 import { withTooltip } from "@/components/tooltip"
 
 const color = ({ active, disabled, defaultColor = "textLite" }) => {
@@ -10,6 +10,7 @@ const color = ({ active, disabled, defaultColor = "textLite" }) => {
 }
 
 const Button = styled.button.attrs(({ icon, hoverIndicator = true, padding = 0, ...rest }) => ({
+  cursor: "pointer",
   ...rest,
   children: icon || rest.children,
   active: rest.active || rest["aria-expanded"],
@@ -22,7 +23,7 @@ const Button = styled.button.attrs(({ icon, hoverIndicator = true, padding = 0,
   line-height: 0;
   background: ${({ theme, active }) =>
     active ? getColor("borderSecondary")({ theme }) : "initial"};
-  cursor: pointer;
+  ${cursor}
   color: ${({ active, disabled, theme }) => getColor(color({ active, disabled }))({ theme })};
 
   svg {
diff --git a/src/components/line/footer/index.js b/src/components/line/footer/index.js
index 80806469..3b4ca6f2 100644
--- a/src/components/line/footer/index.js
+++ b/src/components/line/footer/index.js
@@ -1,9 +1,8 @@
 import React from "react"
-import { Box, Flex } from "@netdata/netdata-ui"
+import { Flex } from "@netdata/netdata-ui"
 import Legend from "@/components/line/legend"
 import HeatmapColors from "@/components/line/legend/heatmapColors"
 import DimensionSort from "@/components/line/dimensionSort"
-import Resize from "@/components/line/resize"
 import { useAttributeValue } from "@/components/provider/selectors"
 import Indicators from "@/components/line/indicators"
 import Drawer from "../drawer"
@@ -19,26 +18,6 @@ export const Container = props => (
   />
 )
 
-const getCursor = (enabledHeightResize, enabledWidthResize) =>
-  enabledHeightResize && enabledWidthResize
-    ? "nwse-resize"
-    : enabledHeightResize
-    ? "ns-resize"
-    : "ew-resize"
-
-const ResizeHandler = () => {
-  const enabledHeightResize = useAttributeValue("enabledHeightResize")
-  const enabledWidthResize = useAttributeValue("enabledWidthResize")
-
-  if (!enabledHeightResize && !enabledWidthResize) return null
-
-  return (
-    <Box position="absolute" right={0} bottom="-4px" className="chart-handle">
-      <Resize cursor={getCursor(enabledHeightResize, enabledWidthResize)} />
-    </Box>
-  )
-}
-
 const Footer = () => {
   const showingInfo = useAttributeValue("showingInfo")
   const expanded = useAttributeValue("expanded")
@@ -59,7 +38,7 @@ const Footer = () => {
           {expanded && <Drawer />}
         </>
       )}
-      {expandable ? (
+      {expandable && (
         <Flex
           flex
           position="relative"
@@ -68,10 +47,7 @@ const Footer = () => {
           border={{ side: "top", color: "borderSecondary" }}
         >
           <Expander />
-          <ResizeHandler />
         </Flex>
-      ) : (
-        <ResizeHandler />
       )}
     </Container>
   )
diff --git a/src/sdk/initialAttributes.js b/src/sdk/initialAttributes.js
index 995ee06f..762aab01 100644
--- a/src/sdk/initialAttributes.js
+++ b/src/sdk/initialAttributes.js
@@ -126,13 +126,9 @@ export default {
   colors: [],
 
   height: "",
-  enabledHeightResize: true,
-  pristineEnabledHeightResize: {},
   enabledYAxis: true,
 
   width: "",
-  enabledWidthResize: false,
-  pristineEnabledWidthResize: {},
   enabledXAxis: true,
 
   hasToolbox: true,
@@ -195,6 +191,7 @@ export default {
   agent: true,
 
   toolboxElements: [Information, ChartType, Fullscreen],
+  toolboxProps: {},
   leftHeaderElements: [Status],
 
   expanded: false,
diff --git a/src/sdk/makeNode.js b/src/sdk/makeNode.js
index e0390e35..8f005061 100644
--- a/src/sdk/makeNode.js
+++ b/src/sdk/makeNode.js
@@ -123,11 +123,6 @@ export default ({ sdk, parent = null, attributes: initialAttributes }) => {
     updateIntls(attributes.timezone)
   }
 
-  const updateSize = (height, width) => {
-    updateAttributes({ height, width })
-    sdk.trigger("sizeChanged", instance, height, width)
-  }
-
   const moveY = (min, max) => {
     sdk.trigger("moveY", instance, min, max)
   }
@@ -178,32 +173,14 @@ export default ({ sdk, parent = null, attributes: initialAttributes }) => {
     moveX(-900)
   }
 
-  const pristineHeight = makePristine(
-    "pristineEnabledHeightResize",
-    ["enabledHeightResize"],
-    updateAttributes
-  )
-
-  const pristineWidth = makePristine(
-    "pristineEnabledWidthResize",
-    ["enabledWidthResize"],
-    updateAttributes
-  )
-
   const toggleFullscreen = () => {
     const fullscreen = getAttribute("fullscreen")
 
     if (!fullscreen) {
-      pristineHeight.updatePristine(attributes, "enabledHeightResize", false)
-      updateAttribute("enabledHeightResize", false)
-      pristineWidth.updatePristine(attributes, "enabledWidthResize", false)
-      updateAttribute("enabledWidthResize", false)
       updateAttribute("fullscreen", !fullscreen)
       return
     }
 
-    pristineHeight.resetPristine(attributes)
-    pristineWidth.resetPristine(attributes)
     updateAttribute("fullscreen", !fullscreen)
   }
 
@@ -240,7 +217,6 @@ export default ({ sdk, parent = null, attributes: initialAttributes }) => {
     getId,
     getAncestor,
     inherit,
-    updateSize,
     updateStaticValueRange,
     resetStaticValueRange,
     toggleFullscreen,