fix: add highcharts wrapper div with explicit height and width to ens…

…ure chart fills the canvas
dhis2 · Nov 7, 2024 · b635a2d · b635a2d
1 parent 0988585
commit b635a2d
Showing 1 changed file with 16 additions and 1 deletion.
diff --git a/src/components/VisualizationPlugin/ChartPlugin.js b/src/components/VisualizationPlugin/ChartPlugin.js
@@ -13,6 +13,7 @@ const ChartPlugin = ({
     animation: defaultAnimation,
     onToggleContextualMenu,
 }) => {
+    const wrapperRef = useRef(null)
     const canvasRef = useRef(undefined)
     const prevStyle = useRef(style)
     const prevRenderCounter = useRef(renderCounter)
@@ -74,7 +75,21 @@ const ChartPlugin = ({
         /* eslint-disable-next-line react-hooks/exhaustive-deps */
     }, [style])
 
-    return <div ref={canvasRef} style={style} />
+    return (
+        <div ref={wrapperRef} style={style}>
+            <div
+                ref={canvasRef}
+                style={{
+                    width: wrapperRef.current
+                        ? wrapperRef.current.offsetWidth
+                        : style.width,
+                    height: wrapperRef.current
+                        ? wrapperRef.current.offsetHeight
+                        : style.height,
+                }}
+            />
+        </div>
+    )
 }
 
 ChartPlugin.defaultProps = {