diff --git a/docs/components/bar-chart/overview.mdx b/docs/components/bar-chart/overview.mdx
index 5790c3250..cee686ff4 100644
--- a/docs/components/bar-chart/overview.mdx
+++ b/docs/components/bar-chart/overview.mdx
@@ -14,7 +14,7 @@ import EchartsBarHorizontalStackedPlayground from '@site/docs/autogenerated/play
 
 Common bar charts normally compare the values of different categories where the length of the bars are proportional to their values.
 
-<EchartsBarSimplePlayground height="40rem" />
+<EchartsBarSimplePlayground height="41rem" />
 
 ## Stacked bar chart
 
diff --git a/docs/components/charts-overview/overview.mdx b/docs/components/charts-overview/overview.mdx
index cc7181baa..61bd83a66 100644
--- a/docs/components/charts-overview/overview.mdx
+++ b/docs/components/charts-overview/overview.mdx
@@ -74,7 +74,7 @@ Example: last year and current year.
 
 ![Colors for comparative data](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3225-2885&t=MD9MvUCkoIcmSi8H-4)
 
-<EchartsPlayground height="40rem" />
+<EchartsPlayground height="42rem" />
 
 ## Loading indicators
 
@@ -84,7 +84,7 @@ A loading indicator provides users with visual feedback that the chart is being
 
 An empty state occurs when a user first opens an application, no data is available, or the user has filtered out all data. The empty state should be visually distinct from the loading state and should provide a clear message to the user. This message should explain why the empty state is being displayed and provide guidance on how to proceed.
 
-<EchartsEmptyStatePlayground height="40rem" />
+<EchartsEmptyStatePlayground height="53rem" />
 
 ## Failure and error messages
 
diff --git a/docs/components/chat/code.mdx b/docs/components/chat/code.mdx
index b7e383fbe..b746c2b18 100644
--- a/docs/components/chat/code.mdx
+++ b/docs/components/chat/code.mdx
@@ -10,6 +10,6 @@ import PropsApi from '@site/docs/autogenerated/api/ix-chat/api.mdx';
 
 ## Basic
 
-<ChatPlayground height="40rem" />
+<ChatPlayground height="62rem" />
 
 <PropsApi />
diff --git a/docs/components/checkbox/code.mdx b/docs/components/checkbox/code.mdx
index ef81568b1..8d93487e3 100644
--- a/docs/components/checkbox/code.mdx
+++ b/docs/components/checkbox/code.mdx
@@ -30,7 +30,7 @@ Enclosing related checkboxes within a single checkbox group container ensures co
 
 ## Indeterminate group
 
-<FormCheckboxGroupIndeterminatePlayground />
+<FormCheckboxGroupIndeterminatePlayground height="10rem" />
 
 ## Validation
 
diff --git a/docs/components/pie-chart/overview.mdx b/docs/components/pie-chart/overview.mdx
index 22ebeca20..9cce3454f 100644
--- a/docs/components/pie-chart/overview.mdx
+++ b/docs/components/pie-chart/overview.mdx
@@ -12,10 +12,10 @@ import EchartsCirclePlayground from '@site/docs/autogenerated/playground/echarts
 
 ## Basic
 
-<EchartsPiePlayground height="40rem" />
+<EchartsPiePlayground height="41rem" />
 
 ## Donut charts
 
 Donut charts are a variation of pie charts that have a hole in the center. Donut charts are often used to display the same information as a pie chart, but additional information can be displayed in the center of the chart.
 
-<EchartsCirclePlayground height="40rem" />
+<EchartsCirclePlayground height="41rem" />
diff --git a/docs/components/special-chart/overview.mdx b/docs/components/special-chart/overview.mdx
index 95ca83cc7..bc48331ad 100644
--- a/docs/components/special-chart/overview.mdx
+++ b/docs/components/special-chart/overview.mdx
@@ -16,11 +16,11 @@ Apache ECharts offers a versatile toolbox that enables users to interact with an
 
 Below is an example demonstrating some of the most commonly used tools and how you can configure them.
 
-<EchartsSpecialToolboxPlayground height="40rem" />
+<EchartsSpecialToolboxPlayground height="41rem" />
 
 ## Advanced zoom and pan
 
 In addition to the toolbox, ECharts provides zoom and pan functionality for a more interactive chart experience.
 Users can zoom in and out using the mouse wheel, and pan the chart by clicking and dragging. These advanced features offer a seamless way to explore detailed data within the chart.
 
-<EchartsSpecialZoomPlayground height="40rem" />
+<EchartsSpecialZoomPlayground height="41rem" />
diff --git a/docs/components/tree/code.mdx b/docs/components/tree/code.mdx
index 8e160d30d..bf940d31a 100644
--- a/docs/components/tree/code.mdx
+++ b/docs/components/tree/code.mdx
@@ -17,7 +17,7 @@ import TreeCustomPlayground from '@site/docs/autogenerated/playground/tree-custo
 
 ## Custom tree node
 
-<TreeCustomPlayground height="12rem" />
+<TreeCustomPlayground height="13rem" />
 
 <PropsApi />
 <TreeItemPropsApi />