yordan-st · Oct 13, 2026 · Oct 14, 2026
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where the chart in design mode overlapped other widgets on the page. The design mode preview now follows the configured width and height and stays within its parent.
+
 ## [6.2.1] - 2025-07-15
 
 ### Changed

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where the chart in design mode overlapped other widgets on the page. The design mode preview now follows the configured width and height and stays within its parent.
+
 ## [6.2.1] - 2025-07-15
 
 ### Changed

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where the chart in design mode overlapped other widgets on the page. The design mode preview now follows the configured width and height and stays within its parent.
+
 ## [6.2.1] - 2025-07-15
 
 ### Changed

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where the chart in design mode overlapped other widgets on the page. The design mode preview now follows the configured width and height and stays within its parent.
+
 ## [6.2.1] - 2025-07-15
 
 ### Changed

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where the chart in design mode overlapped other widgets on the page. The design mode preview now follows the configured width and height and stays within its parent.
+
 ## [6.2.1] - 2025-07-15
 
 ### Fixed

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where the chart in design mode overlapped other widgets on the page. The design mode preview now follows the configured width and height and stays within its parent.
+
 ## [6.2.1] - 2025-07-15
 
 ### Changed

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where the chart in design mode overlapped other widgets on the page. The design mode preview now follows the configured width and height and stays within its parent.
+
 ## [6.2.1] - 2025-07-15
 
 ### Changed

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where the chart in design mode overlapped other widgets on the page. The design mode preview now follows the configured width and height and stays within its parent.
+
 ## [6.2.1] - 2025-07-15
 
 ### Changed

@@ -1,8 +1,12 @@
-import { ComponentType, ReactElement, ReactNode } from "react";
+import { ComponentType, CSSProperties, ReactElement, ReactNode } from "react";
 
 export interface ChartPreviewProps {
     class: string;
     showLegend: boolean;
+    widthUnit: "percentage" | "pixels";
+    width: number | null;
+    heightUnit: "percentageOfWidth" | "pixels" | "percentageOfParent";
+    height: number | null;
     playground: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
     showPlaygroundSlot?: boolean;
     image: ReactNode;
@@ -12,7 +16,7 @@ export interface ChartPreviewProps {
 export function ChartPreview(props: ChartPreviewProps): ReactElement {
     const { renderer: PlaygroundSlot } = props.playground ?? { renderer: () => null };
     return (
-        <div style={{ display: "inline-flex", flexFlow: "column nowrap" }}>
+        <div style={{ display: "flex", flexFlow: "column nowrap", maxWidth: "100%", maxHeight: "100%" }}>
             <div
                 style={
                     props.showPlaygroundSlot
@@ -30,23 +34,49 @@ export function ChartPreview(props: ChartPreviewProps): ReactElement {
 }
 
 ChartPreview.PlotImage = (props: { src: string; alt: string }) => {
-    return <img src={props.src} alt={props.alt} style={{ objectFit: "contain", width: "300px", height: "100%" }} />;
+    return (
+        <img
+            src={props.src}
+            alt={props.alt}
+            style={{ objectFit: "contain", flex: "1 1 0", minWidth: 0, minHeight: 0, height: "100%" }}
+        />
+    );
 };
 
 ChartPreview.PlotLegend = (props: { src: string; alt: string }) => {
-    return <img src={props.src} alt={props.alt} style={{ width: "85px" }} />;
+    return <img src={props.src} alt={props.alt} style={{ flex: "0 1 85px", minWidth: 0, maxWidth: "85px" }} />;
 };
 
+// Mirrors the runtime dimensions, but never lets the preview grow past its parent.
+function getPreviewDimensions(props: ChartPreviewProps): CSSProperties {
+    const style: CSSProperties = {
+        display: "flex",
+        overflow: "hidden",
+        boxSizing: "border-box",
+        maxWidth: "100%",
+        maxHeight: "100%"
+    };
+
+    if (props.width) {
+        style.width = props.widthUnit === "percentage" ? `${props.width}%` : `${props.width}px`;
+    }
+
+    if (props.height) {
+        if (props.heightUnit === "percentageOfWidth") {
+            style.aspectRatio = `100 / ${props.height}`;
+        } else if (props.heightUnit === "pixels") {
+            style.height = `${props.height}px`;
+        } else {
+            style.height = `${props.height}%`;
+        }
+    }
+
+    return style;
+}
+
 function Chart(props: ChartPreviewProps): ReactElement {
     return (
-        <div
-            className={props.class}
-            style={{
-                display: "flex",
-                width: props.showLegend ? "385px" : "300px",
-                height: "232px"
-            }}
-        >
+        <div className={props.class} style={getPreviewDimensions(props)}>
             {props.image}
             {props.showLegend ? props.legend : null}
         </div>

@@ -0,0 +1,62 @@
+import { render } from "@testing-library/react";
+import { ChartPreview, ChartPreviewProps } from "../ChartPreview";
+
+function renderChart(props: Partial<ChartPreviewProps> = {}): HTMLElement {
+    const { container } = render(
+        <ChartPreview
+            class="chart-under-test"
+            showLegend={false}
+            playground={{ widgetCount: 0, renderer: () => null }}
+            widthUnit="percentage"
+            width={100}
+            heightUnit="percentageOfWidth"
+            height={75}
+            image={<ChartPreview.PlotImage src="plot.svg" alt="Plot" />}
+            legend={<ChartPreview.PlotLegend src="legend.svg" alt="Legend" />}
+            {...props}
+        />
+    );
+    return container.querySelector<HTMLElement>(".chart-under-test")!;
+}
+
+describe("ChartPreview", () => {
+    it("never grows past its parent", () => {
+        const chart = renderChart({ widthUnit: "pixels", width: 2000, heightUnit: "pixels", height: 2000 });
+
+        expect(chart.style.maxWidth).toBe("100%");
+        expect(chart.style.maxHeight).toBe("100%");
+        expect(chart.parentElement!.style.display).toBe("flex");
+        expect(chart.parentElement!.style.maxWidth).toBe("100%");
+    });
+
+    it("applies percentage width", () => {
+        expect(renderChart({ widthUnit: "percentage", width: 50 }).style.width).toBe("50%");
+    });
+
+    it("applies pixel width and height", () => {
+        const chart = renderChart({ widthUnit: "pixels", width: 400, heightUnit: "pixels", height: 250 });
+
+        expect(chart.style.width).toBe("400px");
+        expect(chart.style.height).toBe("250px");
+    });
+
+    it("applies height as percentage of parent", () => {
+        expect(renderChart({ heightUnit: "percentageOfParent", height: 60 }).style.height).toBe("60%");
+    });
+
+    it("leaves height to the aspect ratio when height is a percentage of width", () => {
+        expect(renderChart({ heightUnit: "percentageOfWidth", height: 50 }).style.height).toBe("");
+    });
+
+    it("lets the plot image shrink with the chart", () => {
+        const image = renderChart().querySelector<HTMLElement>("img[alt='Plot']")!;
+
+        expect(image.style.width).toBe("");
+        expect(image.style.minWidth).toBe("0");
+    });
+
+    it("renders the legend only when enabled", () => {
+        expect(renderChart({ showLegend: false }).querySelector("img[alt='Legend']")).toBeNull();
+        expect(renderChart({ showLegend: true }).querySelector("img[alt='Legend']")).not.toBeNull();
+    });
+});