diff --git a/playground/entries/Chart/Bubble.tsx b/playground/entries/Chart/Bubble.tsx
index 1c8acdaaf9..5f8387605b 100644
--- a/playground/entries/Chart/Bubble.tsx
+++ b/playground/entries/Chart/Bubble.tsx
@@ -22,15 +22,21 @@ const data = [
 ];
 
 function getJSX(props: BubbleChartJSXProps) {
+  const isRow = props.commonChartProps.direction === 'row' || props.commonChartProps.direction === 'row-reverse';
+  const plotWidth = isRow ? 280 : 320;
+
   return (
     <Chart.Bubble
-      plotWidth={300}
+      plotWidth={plotWidth}
       plotHeight={200}
       data={data}
       aria-label='Bubble chart'
       {...props.commonChartProps}
       {...(props.legendProps && {
-        legendProps: props.legendProps,
+        legendProps: {
+          ...props.legendProps,
+          w: isRow ? '72px' : '100%',
+        },
         showLegend: props.commonChartProps.showLegend as true,
       })}
       {...(props.legendProps?.patterns && { patterns: props.legendProps.patterns })}
diff --git a/semcore/d3-chart/src/utils.ts b/semcore/d3-chart/src/utils.ts
index f485eb11e0..12716e65f3 100644
--- a/semcore/d3-chart/src/utils.ts
+++ b/semcore/d3-chart/src/utils.ts
@@ -278,7 +278,7 @@ export const getChartDefaultColorName = (index: number) => {
 export const getBubbleChartValueScale = (data: any[], key: string) => {
   const z = scaleSqrt()
     .domain([0, Math.max(...data.map((el) => el[key]))])
-    .range([5.5, 50.5]);
+    .range([5.5, 50.5]); // min/max radius
 
   return z;
 };
@@ -328,7 +328,7 @@ export const calculateBubbleDomain = (
   min -= minValueShift * 2;
   max += maxValueShift * 2;
 
-  return [min, max];
+  return [Math.floor(min), Math.floor(max)];
 };
 
 interface PlotEventEmitterEmit {