From a44339c4495f21cf26d758479f9b83b4588f027b Mon Sep 17 00:00:00 2001
From: adnanqaops <adnan.qaops@gmail.com>
Date: Fri, 27 Jun 2025 12:05:45 +0500
Subject: [PATCH] added updates to Components documentation based of Falk's
 feedback

---
 .../examples/CalendarInputComp/Calendar.tsx   |  48 ---
 .../examples/ChartsComp/BarChart.tsx          | 346 ++++++++++++++++++
 .../examples/ChartsComp/LineChart.tsx         | 267 ++++++++++++++
 .../examples/ChartsComp/PieChart.tsx          | 188 ++++++++++
 .../examples/ChartsComp/ScatterChart.tsx      | 274 ++++++++++++++
 .../examples/ContainersComp/Container.tsx     |   2 +-
 .../ContainersComp/FloatTextContainer.tsx     | 288 ++++++++++++++-
 .../examples/ContainersComp/PageLayout.tsx    |  52 ---
 .../ContainersComp/ResponsiveLayout.tsx       | 118 ------
 .../ContainersComp/TabbedContainer.tsx        | 127 -------
 .../pages/ComponentDoc/examples/IFrame.tsx    |  11 +-
 .../examples/MediaComp/ContentCard.tsx        |  12 +
 .../ComponentDoc/examples/formComp/Form.tsx   |  48 ---
 .../examples/formComp/JSONEditor.tsx          |  45 ---
 .../examples/formComp/JSONExplorer.tsx        |  45 ---
 .../examples/formComp/JSONSchemaform.tsx      |  45 ---
 .../src/pages/ComponentDoc/examples/index.ts  |   8 +
 .../examples/presentationComp/comment.tsx     |  44 ---
 .../presentationComp/customComponent.tsx      |  25 +-
 .../examples/presentationComp/fileViewer.tsx  |  57 ---
 .../examples/presentationComp/gridView.tsx    |  51 ---
 .../examples/presentationComp/listView.tsx    |  51 ---
 22 files changed, 1400 insertions(+), 752 deletions(-)
 create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BarChart.tsx
 create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/LineChart.tsx
 create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/PieChart.tsx
 create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/ScatterChart.tsx

diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx
index b7547a9749..e997434c84 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx
@@ -296,54 +296,6 @@ export default function CalendarExample() {
           compFactory={ChartCompWithDefault}
         />
       </ExampleGroup>
-
-      <ExampleGroup
-        title="Animation Style"
-        description="The Following Examples Show different Animation Styles on the Calendar Component."
-      >
-        <Example
-          title="Bounce Animation"
-          width={700}
-          height={600}
-          config={{
-            animationStyle: {
-              "animation": "bounce",
-              "animationDelay": "1s",
-              "animationDuration": "3s",
-              "animationIterationCount": "infinite"
-            },
-          }}
-          compFactory={ChartCompWithDefault}
-        />
-        <Example
-          title="Swing Animation"
-          width={700}
-          height={600}
-          config={{
-            animationStyle: {
-              "animation": "swing",
-              "animationDelay": "1s",
-              "animationDuration": "3s",
-              "animationIterationCount": "infinite"
-            },
-          }}
-          compFactory={ChartCompWithDefault}
-        />
-        <Example
-          title="Tada Animation"
-          width={700}
-          height={600}
-          config={{
-            animationStyle: {
-              "animation": "tada",
-              "animationDelay": "1s",
-              "animationDuration": "3s",
-              "animationIterationCount": "infinite"
-            },
-          }}
-          compFactory={ChartCompWithDefault}
-        />
-      </ExampleGroup>
     </>
   );
 }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BarChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BarChart.tsx
new file mode 100644
index 0000000000..feb7ce59c7
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BarChart.tsx
@@ -0,0 +1,346 @@
+import { uiCompRegistry } from "comps/uiCompRegistry";
+import { trans } from "i18n";
+import { chartColorPalette } from "lowcoder-design";
+import Example from "../../common/Example";
+import ExampleGroup from "../../common/ExampleGroup";
+
+const ChartCompWithDefault = uiCompRegistry["barChart"].comp;
+
+const chartStyle= {
+  background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+  chartBorderColor: "#FDFAFA",
+  chartBorderStyle: "solid",
+  chartBorderWidth: "2",
+  chartBoxShadow: "200",
+  chartShadowColor: "#3377FF"
+}
+
+const titleStyle = {
+  chartBoxShadow: "9",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#FFBD01",
+  chartTextColor: "#36B389",
+  chartTextSize: "30",
+  chartTextWeight: "Bold"
+}
+
+const xAxisStyle = {
+  chartBoxShadow: "5",
+  chartFontFamily: "serif",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#020101",
+  chartTextColor: "#971827",
+  chartTextSize: "20",
+  chartTextWeight: "bold"
+}
+
+const yAxisStyle = {
+  chartBoxShadow: "5",
+  chartFontFamily: "serif",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#FFD701",
+  chartTextColor: "#7A7A7B",
+  chartTextSize: "20",
+  chartTextWeight: "bold"
+}
+
+export default function BarChartExample() {
+  return (
+    <>
+      <ExampleGroup
+        title={trans("componentDoc.basicUsage")}
+        description={trans("componentDoc.basicDemoDescription")}
+      >
+        <Example
+          title={trans("componentDoc.default")}
+          width={700}
+          height={400}
+          hideSettings={true}
+          config={{
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Hiding the Tooltip"
+          width={700}
+          height={400}
+          hideSettings={true}
+          config={{
+            "tooltip": "false",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Bar Chart Type - Waterfall"
+          width={700}
+          height={400}
+          hideSettings={true}
+          config={{
+            "title": "Bar Chart - Waterfall",
+            "chartConfig": {
+                "compType": "bar",
+                "comp": {
+                    "type": "waterfall",
+                }
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Bar Chart Type - Polar"
+          width={700}
+          height={400}
+          hideSettings={true}
+          config={{
+            "title": "Bar Chart - Polar",
+            "chartConfig": {
+                "compType": "bar",
+                "comp": {
+                    "type": "polar",
+                }
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Basic Chart Properties"
+        description="The Following Examples Show the Basic Properites of the Bar Chart Component."
+      >
+        <Example
+          title="Hiding Labels"
+          width={700}
+          height={400}
+          hideSettings={true}
+          config={{
+            "chartConfig": {
+                "compType": "bar",
+                "comp": {
+                    "showLabel": "false",
+                }
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Bar Width - 20"
+          width={700}
+          height={400}
+          hideSettings={true}
+          config={{
+            "chartConfig": {
+                "compType": "bar",
+                "comp": {
+                    "barWidth": "20",
+                }
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Bar Width - 60"
+          width={700}
+          height={400}
+          hideSettings={true}
+          config={{
+            "chartConfig": {
+                "compType": "bar",
+                "comp": {
+                    "barWidth": "60",
+                }
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Bars View Type - Race"
+          width={700}
+          height={400}
+          hideSettings={true}
+          config={{
+            "chartConfig": {
+                "compType": "bar",
+                "comp": {
+                    "race": "true",
+                }
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Bars View Type - Stack"
+          width={700}
+          height={400}
+          hideSettings={true}
+          config={{
+            "chartConfig": {
+                "compType": "bar",
+                "comp": {
+                    "stack": "true",
+                }
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Bars View Type - Show Background"
+          width={700}
+          height={400}
+          hideSettings={true}
+          config={{
+            "chartConfig": {
+                "compType": "bar",
+                "comp": {
+                    "showBackground": "true",
+                }
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Chart Position"
+        description="The Following Examples show the Chart Position of the Bar Chart Component."
+      >
+        <Example
+        title="Custom Position"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            top: 20,
+            right: 0,
+            bottom: 10,
+            left: 20,
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+
+        <Example
+        title="Vertical X-Axis"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            "xAxisDirection": "vertical",
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Title Position"
+        description="The Following Examples show the different title position of the Bar Chart Component."
+      >
+        <Example
+        title="Title Position - Left"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            echartsTitleConfig: {
+            "position": "left",
+            },
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+        <Example
+        title="Title Position - Center"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            echartsTitleConfig: {
+            "position": "center",
+            },
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+        <Example
+        title="Title Position - Right"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            echartsTitleConfig: {
+            "position": "right",
+            },
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+        <Example
+        title="Title Position - Top"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            echartsTitleVerticalConfig: {
+            "position": "top",
+            },
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+        <Example
+        title="Title Position - Bottom"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            echartsTitleVerticalConfig: {
+            "position": "bottom",
+            },
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the Styling Properties on the Bar Chart Component."
+        >
+        <Example
+            title="Chart Styling - Background Color, Box Shadow, Border"
+            width={500}
+            height={350}
+            hideSettings={true}
+            config={{
+            chartStyle: chartStyle,
+            }}
+            compFactory={ChartCompWithDefault}
+        />
+        <Example
+            title="Title Styling - Text, Fonts & Box Shadow"
+            width={500}
+            height={350}
+            hideSettings={true}
+            config={{
+            titleStyle: titleStyle,
+            }}
+            compFactory={ChartCompWithDefault}
+        />
+        <Example
+            title="X-Axis Styling"
+            width={500}
+            height={350}
+            hideSettings={true}
+            config={{
+            xAxisStyle: xAxisStyle,
+            }}
+            compFactory={ChartCompWithDefault}
+        />
+        <Example
+            title="Y-Axis Styling"
+            width={500}
+            height={350}
+            hideSettings={true}
+            config={{
+            yAxisStyle: yAxisStyle,
+            }}
+            compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+    </>
+  );
+}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/LineChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/LineChart.tsx
new file mode 100644
index 0000000000..4acfd3b3d4
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/LineChart.tsx
@@ -0,0 +1,267 @@
+import { uiCompRegistry } from "comps/uiCompRegistry";
+import { trans } from "i18n";
+import { chartColorPalette } from "lowcoder-design";
+import Example from "../../common/Example";
+import ExampleGroup from "../../common/ExampleGroup";
+
+const ChartCompWithDefault = uiCompRegistry["lineChart"].comp;
+
+const chartStyle= {
+  background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+  chartBorderColor: "#FDFAFA",
+  chartBorderStyle: "solid",
+  chartBorderWidth: "2",
+  chartBoxShadow: "200",
+  chartShadowColor: "#3377FF"
+}
+
+const titleStyle = {
+  chartBoxShadow: "9",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#FFBD01",
+  chartTextColor: "#36B389",
+  chartTextSize: "30",
+  chartTextWeight: "Bold"
+}
+
+const xAxisStyle = {
+  chartBoxShadow: "5",
+  chartFontFamily: "serif",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#020101",
+  chartTextColor: "#971827",
+  chartTextSize: "20",
+  chartTextWeight: "bold"
+}
+
+const yAxisStyle = {
+  chartBoxShadow: "5",
+  chartFontFamily: "serif",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#FFD701",
+  chartTextColor: "#7A7A7B",
+  chartTextSize: "20",
+  chartTextWeight: "bold"
+}
+
+export default function LineChartExample() {
+  return (
+    <>
+
+      <ExampleGroup title={trans("componentDoc.line")}>
+        <Example
+          title={trans("componentDoc.basicLine")}
+          width={500}
+          height={300}
+          nameMap={{ "chartConfig.comp.type": trans("componentDoc.lineChartType") }}
+          config={{
+            chartConfig: {
+              compType: "line",
+              comp: { type: "basicLine" },
+            },
+            xConfig: { type: "category" },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title={trans("componentDoc.stackedLine")}
+          width={500}
+          height={300}
+          nameMap={{ "chartConfig.comp.type": trans("componentDoc.lineChartType") }}
+          config={{
+            chartConfig: { 
+              compType: "line",
+              comp: { 
+                type: "stackedLine" ,
+                stacked: true,
+
+              } 
+            },
+            xConfig: { type: "category" },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title={trans("componentDoc.areaLine")}
+          width={500}
+          height={300}
+          nameMap={{ "chartConfig.comp.type": trans("componentDoc.lineChartType") }}
+          config={{
+            chartConfig: { 
+              compType: "line", 
+              comp: { 
+                type: "areaLine",
+                area: true,
+              } 
+            },
+            xConfig: { type: "category" },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Basic Chart Properties"
+        description="The Following Examples Show the Basic Properites of the Line Chart Component."
+      >
+        <Example
+          title="Hiding Labels"
+          width={700}
+          height={400}
+          hideSettings={true}
+          config={{
+            "chartConfig": {
+                "compType": "line",
+                "comp": {
+                    "showLabel": "false",
+                }
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Chart Position"
+        description="The Following Examples show the Chart Position of the Line Chart Component."
+      >
+        <Example
+        title="Custom Position"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            top: 20,
+            right: 0,
+            bottom: 10,
+            left: 20,
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+
+        <Example
+        title="Vertical X-Axis"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            "xAxisDirection": "vertical",
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Title Position"
+        description="The Following Examples show the different title position of the Line Chart Component."
+      >
+        <Example
+        title="Title Position - Left"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            echartsTitleConfig: {
+            "position": "left",
+            },
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+        <Example
+        title="Title Position - Center"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            echartsTitleConfig: {
+            "position": "center",
+            },
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+        <Example
+        title="Title Position - Right"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            echartsTitleConfig: {
+            "position": "right",
+            },
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+        <Example
+        title="Title Position - Top"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            echartsTitleVerticalConfig: {
+            "position": "top",
+            },
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+        <Example
+        title="Title Position - Bottom"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            echartsTitleVerticalConfig: {
+            "position": "bottom",
+            },
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the Styling Properties on the Line Chart Component."
+        >
+        <Example
+            title="Chart Styling - Background Color, Box Shadow, Border"
+            width={500}
+            height={350}
+            hideSettings={true}
+            config={{
+            chartStyle: chartStyle,
+            }}
+            compFactory={ChartCompWithDefault}
+        />
+        <Example
+            title="Title Styling - Text, Fonts & Box Shadow"
+            width={500}
+            height={350}
+            hideSettings={true}
+            config={{
+            titleStyle: titleStyle,
+            }}
+            compFactory={ChartCompWithDefault}
+        />
+        <Example
+            title="X-Axis Styling"
+            width={500}
+            height={350}
+            hideSettings={true}
+            config={{
+            xAxisStyle: xAxisStyle,
+            }}
+            compFactory={ChartCompWithDefault}
+        />
+        <Example
+            title="Y-Axis Styling"
+            width={500}
+            height={350}
+            hideSettings={true}
+            config={{
+            yAxisStyle: yAxisStyle,
+            }}
+            compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+</>
+  );
+}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/PieChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/PieChart.tsx
new file mode 100644
index 0000000000..02532931e9
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/PieChart.tsx
@@ -0,0 +1,188 @@
+import { uiCompRegistry } from "comps/uiCompRegistry";
+import { trans } from "i18n";
+import { chartColorPalette } from "lowcoder-design";
+import Example from "../../common/Example";
+import ExampleGroup from "../../common/ExampleGroup";
+
+const ChartCompWithDefault = uiCompRegistry["pieChart"].comp;
+
+const chartStyle= {
+  background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+  chartBorderColor: "#FDFAFA",
+  chartBorderStyle: "solid",
+  chartBorderWidth: "2",
+  chartBoxShadow: "200",
+  chartShadowColor: "#3377FF"
+}
+
+const titleStyle = {
+  chartBoxShadow: "9",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#FFBD01",
+  chartTextColor: "#36B389",
+  chartTextSize: "30",
+  chartTextWeight: "Bold"
+}
+
+export default function PieChartExample() {
+  return (
+    <>
+      <ExampleGroup title={trans("componentDoc.pie")}>
+        <Example
+          title={trans("componentDoc.basicPie")}
+          width={700}
+          height={400}
+          hideSettings={true}
+          nameMap={{ "chartConfig.comp.type": trans("componentDoc.pieChatType") }}
+          config={{
+            chartConfig: {
+              compType: "pie",
+              comp: { type: "basicPie" },
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title={trans("componentDoc.doughnutPie")}
+          width={700}
+          height={400}
+          hideSettings={true}
+          nameMap={{ "chartConfig.comp.type": trans("componentDoc.pieChatType") }}
+          config={{
+            chartConfig: { compType: "pie", comp: { type: "doughnutPie" } },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title={trans("componentDoc.rosePie")}
+          width={700}
+          height={400}
+          hideSettings={true}
+          nameMap={{ "chartConfig.comp.type": trans("componentDoc.pieChatType") }}
+          config={{
+            chartConfig: { compType: "pie", comp: { type: "rosePie" } },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Calendar Pie"
+          width={700}
+          height={400}
+          hideSettings={true}
+          config={{
+            chartConfig: { compType: "pie", 
+            comp: { 
+              type: "calendarPie",
+              cellSize: "60",
+            } 
+          },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Geo Pie"
+          width={700}
+          height={400}
+          hideSettings={true}
+          config={{
+            chartConfig: { compType: "pie", comp: { type: "geoPie" } },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Title Position"
+        description="The Following Examples show the different title position of the Pie Chart Component."
+      >
+        <Example
+        title="Title Position - Left"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            echartsTitleConfig: {
+            "position": "left",
+            },
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+        <Example
+        title="Title Position - Center"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            echartsTitleConfig: {
+            "position": "center",
+            },
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+        <Example
+        title="Title Position - Right"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            echartsTitleConfig: {
+            "position": "right",
+            },
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+        <Example
+        title="Title Position - Top"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            echartsTitleVerticalConfig: {
+            "position": "top",
+            },
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+        <Example
+        title="Title Position - Bottom"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            echartsTitleVerticalConfig: {
+            "position": "bottom",
+            },
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the Styling Properties on the Pie Chart Component."
+        >
+        <Example
+            title="Chart Styling - Background Color, Box Shadow, Border"
+            width={500}
+            height={350}
+            hideSettings={true}
+            config={{
+            chartStyle: chartStyle,
+            }}
+            compFactory={ChartCompWithDefault}
+        />
+        <Example
+            title="Title Styling - Text, Fonts & Box Shadow"
+            width={500}
+            height={350}
+            hideSettings={true}
+            config={{
+            titleStyle: titleStyle,
+            }}
+            compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+    </>
+  );
+}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/ScatterChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/ScatterChart.tsx
new file mode 100644
index 0000000000..39524eb2c4
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/ScatterChart.tsx
@@ -0,0 +1,274 @@
+import { uiCompRegistry } from "comps/uiCompRegistry";
+import { trans } from "i18n";
+import { chartColorPalette } from "lowcoder-design";
+import Example from "../../common/Example";
+import ExampleGroup from "../../common/ExampleGroup";
+
+const ChartCompWithDefault = uiCompRegistry["scatterChart"].comp;
+
+const chartStyle= {
+  background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+  chartBorderColor: "#FDFAFA",
+  chartBorderStyle: "solid",
+  chartBorderWidth: "2",
+  chartBoxShadow: "200",
+  chartShadowColor: "#3377FF"
+}
+
+const titleStyle = {
+  chartBoxShadow: "9",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#FFBD01",
+  chartTextColor: "#36B389",
+  chartTextSize: "30",
+  chartTextWeight: "Bold"
+}
+
+const xAxisStyle = {
+  chartBoxShadow: "5",
+  chartFontFamily: "serif",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#020101",
+  chartTextColor: "#971827",
+  chartTextSize: "20",
+  chartTextWeight: "bold"
+}
+
+const yAxisStyle = {
+  chartBoxShadow: "5",
+  chartFontFamily: "serif",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#FFD701",
+  chartTextColor: "#7A7A7B",
+  chartTextSize: "20",
+  chartTextWeight: "bold"
+}
+
+export default function ScatterChartExample() {
+  return (
+    <>
+
+      <ExampleGroup title={trans("componentDoc.scatter")}>
+        <Example
+          title={trans("componentDoc.circle")}
+          width={700}
+          height={400}
+          hideSettings={true}
+          nameMap={{ "chartConfig.comp.shape": trans("componentDoc.scatterShape") }}
+          config={{
+            chartConfig: {
+              compType: "scatter",
+              comp: { shape: "circle" },
+            },
+            xConfig: { type: "category" },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title={trans("componentDoc.rect")}
+          width={700}
+          height={400}
+          hideSettings={true}
+          nameMap={{ "chartConfig.comp.shape": trans("componentDoc.scatterShape") }}
+          config={{
+            chartConfig: { compType: "scatter", comp: { shape: "rect" } },
+            xConfig: { type: "category" },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title={trans("componentDoc.triangle")}
+          width={700}
+          height={400}
+          hideSettings={true}
+          nameMap={{ "chartConfig.comp.shape": trans("componentDoc.scatterShape") }}
+          config={{
+            chartConfig: { compType: "scatter", comp: { shape: "triangle" } },
+            xConfig: { type: "category" },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title={trans("componentDoc.diamond")}
+          width={700}
+          height={400}
+          hideSettings={true}
+          nameMap={{ "chartConfig.comp.shape": trans("componentDoc.scatterShape") }}
+          config={{
+            chartConfig: { compType: "scatter", comp: { shape: "diamond" } },
+            xConfig: { type: "category" },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title={trans("componentDoc.pin")}
+          width={700}
+          height={400}
+          hideSettings={true}
+          nameMap={{ "chartConfig.comp.shape": trans("componentDoc.scatterShape") }}
+          config={{
+            chartConfig: { compType: "scatter", comp: { shape: "pin" } },
+            xConfig: { type: "category" },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title={trans("componentDoc.arrow")}
+          width={700}
+          height={400}
+          hideSettings={true}
+          nameMap={{ "chartConfig.comp.shape": trans("componentDoc.scatterShape") }}
+          config={{
+            chartConfig: { compType: "scatter", comp: { shape: "arrow" } },
+            xConfig: { type: "category" },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+
+        <Example
+          title="Chart Type - Polar"
+          width={700}
+          height={400}
+          hideSettings={true}
+          config={{
+            chartConfig: { compType: "scatter", comp: { polar: true } },
+            xConfig: { type: "category" },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Chart Position"
+        description="The Following Examples show the Chart Position of the Scatter Chart Component."
+      >
+        <Example
+        title="Custom Position"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            top: 20,
+            right: 0,
+            bottom: 10,
+            left: 20,
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Title Position"
+        description="The Following Examples show the different title position of the Scatter Chart Component."
+      >
+        <Example
+        title="Title Position - Left"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            echartsTitleConfig: {
+            "position": "left",
+            },
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+        <Example
+        title="Title Position - Center"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            echartsTitleConfig: {
+            "position": "center",
+            },
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+        <Example
+        title="Title Position - Right"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            echartsTitleConfig: {
+            "position": "right",
+            },
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+        <Example
+        title="Title Position - Top"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            echartsTitleVerticalConfig: {
+            "position": "top",
+            },
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+        <Example
+        title="Title Position - Bottom"
+        width={700}
+        height={400}
+        hideSettings={true}
+        config={{
+            echartsTitleVerticalConfig: {
+            "position": "bottom",
+            },
+        }}
+        compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the Styling Properties on the Scatter Chart Component."
+        >
+        <Example
+            title="Chart Styling - Background Color, Box Shadow, Border"
+            width={500}
+            height={350}
+            hideSettings={true}
+            config={{
+            chartStyle: chartStyle,
+            }}
+            compFactory={ChartCompWithDefault}
+        />
+        <Example
+            title="Title Styling - Text, Fonts & Box Shadow"
+            width={500}
+            height={350}
+            hideSettings={true}
+            config={{
+            titleStyle: titleStyle,
+            }}
+            compFactory={ChartCompWithDefault}
+        />
+        <Example
+            title="X-Axis Styling"
+            width={500}
+            height={350}
+            hideSettings={true}
+            config={{
+            xAxisStyle: xAxisStyle,
+            }}
+            compFactory={ChartCompWithDefault}
+        />
+        <Example
+            title="Y-Axis Styling"
+            width={500}
+            height={350}
+            hideSettings={true}
+            config={{
+            yAxisStyle: yAxisStyle,
+            }}
+            compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+      
+    </>
+  );
+}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx
index 40736a95a6..450bfef8cb 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx
@@ -1296,7 +1296,7 @@ export default function ContainerExample() {
                 }}
                 compFactory={ContainerComp}
             />
-        </ExampleGroup>     
+        </ExampleGroup>   
       </>
     );
   }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/FloatTextContainer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/FloatTextContainer.tsx
index 7a15787737..e138d9193f 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/FloatTextContainer.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/FloatTextContainer.tsx
@@ -1,4 +1,4 @@
-import { ContainerComp } from "comps/comps/containerComp/containerComp";
+import { ContainerComp } from "comps/comps/containerComp/textContainerComp";
 import { trans } from "i18n";
 import { chartColorPalette } from "lowcoder-design";
 import Example from "../../common/Example";
@@ -7,8 +7,8 @@ import ExampleGroup from "../../common/ExampleGroup";
 const container = {
     "header": {
         "layout": {
-            "f1e0a72f": {
-                "i": "f1e0a72f",
+            "643c61b9": {
+                "i": "643c61b9",
                 "h": 5,
                 "w": 24,
                 "x": 0,
@@ -16,7 +16,7 @@ const container = {
             }
         },
         "items": {
-            "f1e0a72f": {
+            "643c61b9": {
                 "compType": "text",
                 "comp": {
                     "text": "### Displayed Container Title",
@@ -37,6 +37,7 @@ const container = {
                         "top": "",
                         "bottom": ""
                     },
+                    "showDataLoadingIndicators": false,
                     "preventStyleOverwriting": false,
                     "appliedThemeId": "",
                     "version": "latest"
@@ -49,22 +50,40 @@ const container = {
         "0": {
             "view": {
                 "layout": {
-                    "e13e96e1": {
-                        "i": "e13e96e1",
-                        "h": 20,
-                        "w": 17,
-                        "x": 3,
-                        "y": 1,
+                    "157ca74a": {
+                        "i": "157ca74a",
+                        "h": 21,
+                        "w": 24,
+                        "x": 0,
+                        "y": 0,
                         "pos": 0
                     }
                 },
                 "items": {
-                    "e13e96e1": {
+                    "157ca74a": {
                         "compType": "image",
                         "comp": {
-                            "src": "https://temp.im/350x400",
+                            "sourceMode": "standard",
+                            "src": "https://framerusercontent.com/images/Ks478GmT2s9Ewl2BhCGGJWDqdKo.jpg?scale-down-to=4096",
+                            "iconScoutAsset": {
+                                "uuid": "",
+                                "value": "",
+                                "preview": ""
+                            },
+                            "style": {
+                                "margin": "0px",
+                                "padding": "0px"
+                            },
+                            "clipPath": "none",
                             "autoHeight": "fixed",
                             "restrictPaddingOnRotation": "image",
+                            "enableOverflow": false,
+                            "aspectRatio": "16 / 9",
+                            "placement": "top",
+                            "overflow": "hidden",
+                            "positionX": "center",
+                            "positionY": "center",
+                            "showDataLoadingIndicators": false,
                             "preventStyleOverwriting": false,
                             "appliedThemeId": "",
                             "version": "latest"
@@ -80,7 +99,6 @@ const container = {
     },
     "showHeader": true,
     "showBody": true,
-    "showFooter": true,
     "autoHeight": "auto",
     "showVerticalScrollbar": false,
     "horizontalGridCells": 24,
@@ -91,19 +109,240 @@ const container = {
     "appliedThemeId": ""
 };
 
-const text ="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat faucibus eleifend. Pellentesque eleifend, risus vel sagittis mattis, mauris ipsum tempor sapien, eu lobortis lacus libero a dui. Cras erat felis, rhoncus vestibulum consectetur et, ultrices ut purus. Sed a tortor orci. Vestibulum nec eleifend ante.";
+const text ="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat faucibus eleifend. Pellentesque eleifend, risus vel sagittis mattis, mauris ipsum tempor sapien, eu lobortis lacus libero a dui. Cras erat felis, rhoncus vestibulum consectetur et, ultrices ut purus. Sed a tortor orci. Vestibulum nec eleifend ante.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat faucibus eleifend. Pellentesque eleifend, risus vel sagittis mattis, mauris ipsum tempor sapien, eu lobortis lacus libero a dui. Cras erat felis, rhoncus vestibulum consectetur et, ultrices ut purus. Sed a tortor orci. Vestibulum nec eleifend ante.";
 
 export default function FloatTextContainerExample() {
   return (
     <>
       <ExampleGroup
         title={trans("componentDoc.basicUsage")}
-        description="The Following Examples Show the Basic Usage of the Collapsiable Container Component."
+        description="The Following Examples Show the Basic Usage of the Float Text Container Component."
       >
         <Example
           title="Default Container"
           hideSettings={true}
-          height={500}
+          height={400}
+          width={600}
+          config={{
+            container: container,
+            text: text,
+            float: "left",
+            horizontalAlignment: "justify",
+            width: "60",
+            type: "markdown",
+          }}
+          compFactory={ContainerComp}
+        />
+        <Example
+          title="Hiding the Container"
+          hideSettings={true}
+          height={400}
+          width={600}
+          config={{
+            container: container,
+            text: text,
+            float: "left",
+            horizontalAlignment: "justify",
+            width: "60",
+            type: "markdown",
+            hidden: true,
+          }}
+          compFactory={ContainerComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Advance Usage"
+        description="The Following Examples Show the Advance Usage of the Float Text Container Component."
+      >
+        <Example
+          title="Content Width - 40"
+          hideSettings={true}
+          height={400}
+          width={600}
+          config={{
+            container: container,
+            text: text,
+            float: "left",
+            horizontalAlignment: "justify",
+            width: "40",
+            type: "markdown",
+          }}
+          compFactory={ContainerComp}
+        />
+        <Example
+          title="Content Width - 60"
+          hideSettings={true}
+          height={400}
+          width={600}
+          config={{
+            container: container,
+            text: text,
+            float: "left",
+            horizontalAlignment: "justify",
+            width: "60",
+            type: "markdown",
+          }}
+          compFactory={ContainerComp}
+        />
+        <Example
+          title="Text Float Type - Right"
+          hideSettings={true}
+          height={400}
+          width={600}
+          config={{
+            container: container,
+            text: text,
+            float: "right",
+            horizontalAlignment: "justify",
+            width: "60",
+            type: "markdown",
+          }}
+          compFactory={ContainerComp}
+        />
+        <Example
+          title="Text Float Type - Left"
+          hideSettings={true}
+          height={400}
+          width={600}
+          config={{
+            container: container,
+            text: text,
+            float: "left",
+            horizontalAlignment: "justify",
+            width: "60",
+            type: "markdown",
+          }}
+          compFactory={ContainerComp}
+        />
+        <Example
+          title="Text Float Type - None"
+          hideSettings={true}
+          height={400}
+          width={600}
+          config={{
+            container: container,
+            text: text,
+            float: "none",
+            horizontalAlignment: "justify",
+            width: "60",
+            type: "markdown",
+          }}
+          compFactory={ContainerComp}
+        />
+        <Example
+          title="Text Alignment - Left"
+          hideSettings={true}
+          height={400}
+          width={600}
+          config={{
+            container: container,
+            text: text,
+            horizontalAlignment: "left",
+            width: "60",
+            type: "markdown",
+          }}
+          compFactory={ContainerComp}
+        />
+        <Example
+          title="Text Alignment - Right"
+          hideSettings={true}
+          height={400}
+          width={600}
+          config={{
+            container: container,
+            text: text,
+            horizontalAlignment: "right",
+            width: "60",
+            type: "markdown",
+          }}
+          compFactory={ContainerComp}
+        />
+        <Example
+          title="Text Alignment - Justified"
+          hideSettings={true}
+          height={400}
+          width={600}
+          config={{
+            container: container,
+            text: text,
+            horizontalAlignment: "justify",
+            width: "60",
+            type: "markdown",
+          }}
+          compFactory={ContainerComp}
+        />
+        <Example
+          title="Text Alignment - Center"
+          hideSettings={true}
+          height={400}
+          width={600}
+          config={{
+            container: container,
+            text: text,
+            horizontalAlignment: "center",
+            width: "60",
+            type: "markdown",
+          }}
+          compFactory={ContainerComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the Styling Properties of the Float Text Container Component."
+      >
+        <Example
+          title="Background Color, Margin & Padding"
+          hideSettings={true}
+          height={600}
+          width={1000}
+          config={{
+            container: container,
+            text: text,
+            float: "left",
+            horizontalAlignment: "justify",
+            width: "60",
+            type: "markdown",
+            style: {
+                "background": "#14E9CF",
+                "margin": "0px",
+                "padding": "20px",
+            },
+          }}
+          compFactory={ContainerComp}
+        />
+        <Example
+          title="Text Properties"
+          hideSettings={true}
+          height={600}
+          width={1000}
+          config={{
+            container: container,
+            text: text,
+            float: "left",
+            horizontalAlignment: "justify",
+            width: "60",
+            type: "markdown",
+            style: {
+                "background": "#14E9CF",
+                "margin": "0px",
+                "padding": "20px",
+                "text": "#080808",
+                "textTransform": "capitalize",
+                "textDecoration": "underline",
+                "textSize": "30px",
+                "textWeight": "bold",
+                "fontFamily": "Verdana",
+                "fontStyle": "italic",
+            },
+          }}
+          compFactory={ContainerComp}
+        />
+        <Example
+          title="Border Properties"
+          hideSettings={true}
+          height={600}
           width={1000}
           config={{
             container: container,
@@ -111,6 +350,23 @@ export default function FloatTextContainerExample() {
             float: "left",
             horizontalAlignment: "justify",
             width: "60",
+            type: "markdown",
+            style: {
+                "background": "#14E9CF",
+                "margin": "0px",
+                "padding": "20px",
+                "text": "#080808",
+                "textTransform": "capitalize",
+                "textDecoration": "underline",
+                "textSize": "30px",
+                "textWeight": "bold",
+                "fontFamily": "Verdana",
+                "fontStyle": "italic",
+                "border": "#131BDB",
+                "borderStyle": "solid",
+                "radius": "10px",
+                "borderWidth": "3px",
+            },
           }}
           compFactory={ContainerComp}
         />
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx
index 3c1d84e380..80c8d899eb 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx
@@ -8271,58 +8271,6 @@ export default function PageLayoutExample() {
             compFactory={PageLayoutComp}
             />
         </ExampleGroup>
-
-        <ExampleGroup
-        title="Animation Style"
-        description="The Following Examples Show different Animation Styles on the Page Layout Component."
-        >
-        <Example
-            title="Bounce Animation"
-            width={1000}
-            hideSettings={true}
-            config={{
-                container: container,
-                animationStyle: 
-                {
-                    "animation": "bounce",
-                    "animationDelay": "1s",
-                    "animationDuration": "3s",
-                    "animationIterationCount": "infinite",
-                },
-            }}
-            compFactory={PageLayoutComp}
-        />
-        <Example
-            title="Swing Animation"
-            width={1000}
-            hideSettings={true}
-            config={{
-                container: container,
-                animationStyle: {
-                    "animation": "swing",
-                    "animationDelay": "1s",
-                    "animationDuration": "3s",
-                    "animationIterationCount": "infinite"
-                },
-            }}
-            compFactory={PageLayoutComp}
-        />
-        <Example
-            title="Tada Animation"
-            width={1000}
-            hideSettings={true}
-            config={{
-                container: container,
-                animationStyle: {
-                    "animation": "tada",
-                    "animationDelay": "1s",
-                    "animationDuration": "3s",
-                    "animationIterationCount": "infinite"
-                },
-            }}
-            compFactory={PageLayoutComp}
-        />
-        </ExampleGroup>
       </>
     );
   }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ResponsiveLayout.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ResponsiveLayout.tsx
index 02e34dd8a7..d3b9391c2b 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ResponsiveLayout.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ResponsiveLayout.tsx
@@ -477,124 +477,6 @@ export default function ResponsiveLayoutExample() {
             compFactory={ResponsiveLayoutComp}
           />
         </ExampleGroup>
-
-        <ExampleGroup
-        title="Animation Style"
-        description="The Following Examples Show different Animation Styles on the Responsive Layout Component."
-        >
-        <Example
-            title="Bounce Animation"
-            width={1000}
-            hideSettings={true}
-            config={{
-                containers: container,
-                columns: column,
-                columnStyle: 
-                {
-                    "background": "linear-gradient(90deg, RGBA(250, 112, 154, 1) 0%, rgba(254,225,64,1) 100%)",
-                    "border": "#222222",
-                    "radius": "20px",
-                    "borderWidth": "3px",
-                    "borderStyle": "solid",
-                    "margin": "5px",
-                    "padding": "10px",
-                },
-                style: 
-                {
-                    "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
-                    "border": "#043BFD",
-                    "radius": "20px",
-                    "borderWidth": "3px",
-                    "borderStyle": "dashed",
-                    "margin": "5px",
-                    "padding": "20px",
-                },
-                rowBreak: true,
-                animationStyle: 
-                {
-                    "animation": "bounce",
-                    "animationDelay": "1s",
-                    "animationDuration": "3s",
-                    "animationIterationCount": "infinite",
-                },
-            }}
-            compFactory={ResponsiveLayoutComp}
-        />
-        <Example
-            title="Swing Animation"
-            width={1000}
-            hideSettings={true}
-            config={{
-                containers: container,
-                columns: column,
-                columnStyle: 
-                {
-                    "background": "linear-gradient(90deg, RGBA(250, 112, 154, 1) 0%, rgba(254,225,64,1) 100%)",
-                    "border": "#222222",
-                    "radius": "20px",
-                    "borderWidth": "3px",
-                    "borderStyle": "solid",
-                    "margin": "5px",
-                    "padding": "10px",
-                },
-                style: 
-                {
-                    "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
-                    "border": "#043BFD",
-                    "radius": "20px",
-                    "borderWidth": "3px",
-                    "borderStyle": "dashed",
-                    "margin": "5px",
-                    "padding": "20px",
-                },
-                rowBreak: true,
-                animationStyle: {
-                    "animation": "swing",
-                    "animationDelay": "1s",
-                    "animationDuration": "3s",
-                    "animationIterationCount": "infinite"
-                },
-            }}
-            compFactory={ResponsiveLayoutComp}
-        />
-        <Example
-            title="Tada Animation"
-            width={1000}
-            hideSettings={true}
-            config={{
-                containers: container,
-                columns: column,
-                columnStyle: 
-                {
-                    "background": "linear-gradient(90deg, RGBA(250, 112, 154, 1) 0%, rgba(254,225,64,1) 100%)",
-                    "border": "#222222",
-                    "radius": "20px",
-                    "borderWidth": "3px",
-                    "borderStyle": "solid",
-                    "margin": "5px",
-                    "padding": "10px",
-                },
-                style: 
-                {
-                    "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
-                    "border": "#043BFD",
-                    "radius": "20px",
-                    "borderWidth": "3px",
-                    "borderStyle": "dashed",
-                    "margin": "5px",
-                    "padding": "20px",
-                },
-                rowBreak: true,
-                animationStyle: {
-                    "animation": "tada",
-                    "animationDelay": "1s",
-                    "animationDuration": "3s",
-                    "animationIterationCount": "infinite"
-                },
-            }}
-            compFactory={ResponsiveLayoutComp}
-        />
-        </ExampleGroup>
       </>
     );
   }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx
index 93c78ec9c0..24c12c89d8 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx
@@ -469,133 +469,6 @@ export default function TabbedContainerExample() {
             compFactory={TabbedContainerComp}
           />
         </ExampleGroup>
-
-        <ExampleGroup
-          title="Animation Style"
-          description="The Following Examples Show different Animation Styles on the Tabbed Container Component."
-          >
-          <Example
-              title="Bounce Animation"
-              hideSettings={true}
-              config={{
-                containers: container,
-                tabs: tab,
-                style: {
-                  "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
-                  "margin": "5px",
-                  "padding": "15px",
-                  "tabText": "#7F7F86",
-                  "textTransform": "Uppercase",
-                  "textDecoration": "underline",
-                  "textSize": "20px",
-                  "textWeight": "bold",
-                  "fontFamily": "Courier New",
-                  "fontStyle": "italic",
-                  "border": "#5589F2",
-                  "borderStyle": "solid",
-                  "radius": "20px",
-                  "borderWidth": "3px",
-                  "accent": "#222222",
-                },
-                headerStyle:{
-                  "containerHeaderPadding": "10px",
-                  "headerBackground": "#FFE607",
-                },
-                bodyStyle:{
-                  "containerBodyPadding": "20px",
-                  "background": "#E1825A",
-                },
-                animationStyle: 
-                {
-                    "animation": "bounce",
-                    "animationDelay": "1s",
-                    "animationDuration": "3s",
-                    "animationIterationCount": "infinite",
-                },
-              }}
-              compFactory={TabbedContainerComp}
-          />
-          <Example
-              title="Swing Animation"
-              hideSettings={true}
-              config={{
-                containers: container,
-                tabs: tab,
-                style: {
-                  "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
-                  "margin": "5px",
-                  "padding": "15px",
-                  "tabText": "#7F7F86",
-                  "textTransform": "Uppercase",
-                  "textDecoration": "underline",
-                  "textSize": "20px",
-                  "textWeight": "bold",
-                  "fontFamily": "Courier New",
-                  "fontStyle": "italic",
-                  "border": "#5589F2",
-                  "borderStyle": "solid",
-                  "radius": "20px",
-                  "borderWidth": "3px",
-                  "accent": "#222222",
-                },
-                headerStyle:{
-                  "containerHeaderPadding": "10px",
-                  "headerBackground": "#FFE607",
-                },
-                bodyStyle:{
-                  "containerBodyPadding": "20px",
-                  "background": "#E1825A",
-                },
-                animationStyle: {
-                    "animation": "swing",
-                    "animationDelay": "1s",
-                    "animationDuration": "3s",
-                    "animationIterationCount": "infinite"
-                },
-              }}
-              compFactory={TabbedContainerComp}
-          />
-          <Example
-              title="Tada Animation"
-              hideSettings={true}
-              config={{
-                containers: container,
-                tabs: tab,
-                style: {
-                  "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
-                  "margin": "5px",
-                  "padding": "15px",
-                  "tabText": "#7F7F86",
-                  "textTransform": "Uppercase",
-                  "textDecoration": "underline",
-                  "textSize": "20px",
-                  "textWeight": "bold",
-                  "fontFamily": "Courier New",
-                  "fontStyle": "italic",
-                  "border": "#5589F2",
-                  "borderStyle": "solid",
-                  "radius": "20px",
-                  "borderWidth": "3px",
-                  "accent": "#222222",
-                },
-                headerStyle:{
-                  "containerHeaderPadding": "10px",
-                  "headerBackground": "#FFE607",
-                },
-                bodyStyle:{
-                  "containerBodyPadding": "20px",
-                  "background": "#E1825A",
-                },
-                animationStyle: {
-                    "animation": "tada",
-                    "animationDelay": "1s",
-                    "animationDuration": "3s",
-                    "animationIterationCount": "infinite"
-                },
-              }}
-              compFactory={TabbedContainerComp}
-        />
-        </ExampleGroup>
       </>
     );
   }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/IFrame.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/IFrame.tsx
index 49b1fd0dba..dc53b544bb 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/IFrame.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/IFrame.tsx
@@ -12,20 +12,27 @@ export default function IFrameExample() {
       >
         <Example
           title="IFrame Component"
+          hideSettings={true}
+          width={1000}
+          height={600}
           config={{
-            url: "https://lowcoder.cloud/",
+            url: "https://www.wikipedia.org/",
           }}
           compFactory={IFrameComp}
         />
         <Example
           title="Hiding the IFrame Component"
+          hideSettings={true}
+          width={1000}
+          height={600}
           config={{
-            url: "https://lowcoder.cloud/",
+            url: "https://www.wikipedia.org/",
             hidden: true,
           }}
           compFactory={IFrameComp}
         />
       </ExampleGroup>
+
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/ContentCard.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/ContentCard.tsx
index 5a6e1d6c0a..4422173372 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/ContentCard.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/ContentCard.tsx
@@ -13,6 +13,7 @@ export default function ContentCardExample() {
             title="Hiding the Card Component"
             config={{ 
                 hidden: true,
+                imgSrc: "https://framerusercontent.com/images/Ks478GmT2s9Ewl2BhCGGJWDqdKo.jpg?scale-down-to=4096",
             }}
             compFactory={CardComp}
           />
@@ -20,6 +21,7 @@ export default function ContentCardExample() {
             title="Hiding the Title"
             config={{ 
                 showTitle: false,
+                imgSrc: "https://framerusercontent.com/images/Ks478GmT2s9Ewl2BhCGGJWDqdKo.jpg?scale-down-to=4096",
             }}
             compFactory={CardComp}
           />
@@ -27,6 +29,7 @@ export default function ContentCardExample() {
             title="Hiding the Content Title & Description"
             config={{ 
                 showMeta: false,
+                imgSrc: "https://framerusercontent.com/images/Ks478GmT2s9Ewl2BhCGGJWDqdKo.jpg?scale-down-to=4096",
             }}
             compFactory={CardComp}
           />
@@ -34,12 +37,14 @@ export default function ContentCardExample() {
             title="Hiding the Action Items"
             config={{ 
                 showActionIcon: false,
+                imgSrc: "https://framerusercontent.com/images/Ks478GmT2s9Ewl2BhCGGJWDqdKo.jpg?scale-down-to=4096",
             }}
             compFactory={CardComp}
           />
           <Example
             title="Custom text on Title and Description"
             config={{ 
+                imgSrc: "https://framerusercontent.com/images/Ks478GmT2s9Ewl2BhCGGJWDqdKo.jpg?scale-down-to=4096",
                 title: "Jennifer Holmes",
                 metaTitle: "Head Cook",
                 metaDesc: "Responsible for the daily preparation of food for participants, including the cooking of meals, and maintaining high standards of food quality, food production and portion control using the standardized menu. ",
@@ -55,6 +60,7 @@ export default function ContentCardExample() {
           <Example
             title="Backround Color, Icon Color, Padding and Border properties"
             config={{
+              imgSrc: "https://framerusercontent.com/images/Ks478GmT2s9Ewl2BhCGGJWDqdKo.jpg?scale-down-to=4096",
               title: "Jennifer Holmes",
               metaTitle: "Head Cook",
               metaDesc: "Responsible for the daily preparation of food for participants, including the cooking of meals, and maintaining high standards of food quality, food production and portion control using the standardized menu. ",
@@ -75,6 +81,7 @@ export default function ContentCardExample() {
           <Example
             title="Box Shadow & Rotation"
             config={{
+              imgSrc: "https://framerusercontent.com/images/Ks478GmT2s9Ewl2BhCGGJWDqdKo.jpg?scale-down-to=4096",
               title: "Jennifer Holmes",
               metaTitle: "Head Cook",
               metaDesc: "Responsible for the daily preparation of food for participants, including the cooking of meals, and maintaining high standards of food quality, food production and portion control using the standardized menu. ",           
@@ -99,6 +106,7 @@ export default function ContentCardExample() {
             title="Header Styling"
             width={500}
             config={{
+              imgSrc: "https://framerusercontent.com/images/Ks478GmT2s9Ewl2BhCGGJWDqdKo.jpg?scale-down-to=4096",
               title: "Jennifer Holmes",
               metaTitle: "Head Cook",
               metaDesc: "Responsible for the daily preparation of food for participants, including the cooking of meals, and maintaining high standards of food quality, food production and portion control using the standardized menu. ",
@@ -138,6 +146,7 @@ export default function ContentCardExample() {
             title="Body Styling"
             width={500}
             config={{
+              imgSrc: "https://framerusercontent.com/images/Ks478GmT2s9Ewl2BhCGGJWDqdKo.jpg?scale-down-to=4096",
               title: "Jennifer Holmes",
               metaTitle: "Head Cook",
               metaDesc: "Responsible for the daily preparation of food for participants, including the cooking of meals, and maintaining high standards of food quality, food production and portion control using the standardized menu. ",
@@ -199,6 +208,7 @@ export default function ContentCardExample() {
             title="Bounce Animation"
             hideSettings={true}
             config={{
+                imgSrc: "https://framerusercontent.com/images/Ks478GmT2s9Ewl2BhCGGJWDqdKo.jpg?scale-down-to=4096",
                 animationStyle: 
                 {
                     "animation": "bounce",
@@ -259,6 +269,7 @@ export default function ContentCardExample() {
             title="Swing Animation"
             hideSettings={true}
             config={{
+              imgSrc: "https://framerusercontent.com/images/Ks478GmT2s9Ewl2BhCGGJWDqdKo.jpg?scale-down-to=4096",
               title: "Jennifer Holmes",
               metaTitle: "Head Cook",
               metaDesc: "Responsible for the daily preparation of food for participants, including the cooking of meals, and maintaining high standards of food quality, food production and portion control using the standardized menu. ",
@@ -318,6 +329,7 @@ export default function ContentCardExample() {
             title="Tada Animation"
             hideSettings={true}
             config={{
+              imgSrc: "https://framerusercontent.com/images/Ks478GmT2s9Ewl2BhCGGJWDqdKo.jpg?scale-down-to=4096",
               title: "Jennifer Holmes",
               metaTitle: "Head Cook",
               metaDesc: "Responsible for the daily preparation of food for participants, including the cooking of meals, and maintaining high standards of food quality, food production and portion control using the standardized menu. ",
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx
index bb9d05308c..0274ef38eb 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx
@@ -1002,54 +1002,6 @@ export default function FormExample() {
                 compFactory={FormComp}
             />
         </ExampleGroup>
-
-        <ExampleGroup
-        title="Animation Style"
-        description="The Following Examples Show different animations on the Form Component."
-        >
-        <Example
-        title="Bounce Animation"
-        hideSettings={true}
-        config={{
-            container: container, 
-            animationStyle: {
-            "animation": "bounce",
-            "animationDelay": "1s",
-            "animationDuration": "3s",
-            "animationIterationCount": "infinite"
-            },
-        }}
-        compFactory={FormComp}
-        />
-        <Example
-        title="Swing Animation"
-        hideSettings={true}
-        config={{
-            container: container, 
-            animationStyle: {
-            "animation": "swing",
-            "animationDelay": "1s",
-            "animationDuration": "3s",
-            "animationIterationCount": "infinite"
-            },
-        }}
-        compFactory={FormComp}
-        />
-        <Example
-        title="Tada Animation"
-        hideSettings={true}
-        config={{
-            container: container, 
-            animationStyle: {
-            "animation": "tada",
-            "animationDelay": "1s",
-            "animationDuration": "3s",
-            "animationIterationCount": "infinite"
-            },
-        }}
-        compFactory={FormComp}
-        />
-        </ExampleGroup>
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx
index 6f618a8631..63b8c49473 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx
@@ -121,51 +121,6 @@ export default function JsonEditorExample() {
           compFactory={JsonEditorComp}
         />
       </ExampleGroup>
-
-      <ExampleGroup
-        title="Animation Style"
-        description="The Following Examples Show different animations on the JSON Editor Component."
-        >
-        <Example
-          title="Bounce Animation"
-          hideSettings={true}
-          config={{
-            animationStyle: {
-            "animation": "bounce",
-            "animationDelay": "1s",
-            "animationDuration": "3s",
-            "animationIterationCount": "infinite"
-            },
-          }}
-         compFactory={JsonEditorComp}
-        />
-        <Example
-          title="Swing Animation"
-          hideSettings={true}
-          config={{
-            animationStyle: {
-            "animation": "swing",
-            "animationDelay": "1s",
-            "animationDuration": "3s",
-            "animationIterationCount": "infinite"
-            },
-          }}
-          compFactory={JsonEditorComp}
-        />
-      <Example
-      title="Tada Animation"
-      hideSettings={true}
-      config={{
-          animationStyle: {
-          "animation": "tada",
-          "animationDelay": "1s",
-          "animationDuration": "3s",
-          "animationIterationCount": "infinite"
-          },
-      }}
-      compFactory={JsonEditorComp}
-      />
-      </ExampleGroup> 
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx
index 156e3b15f0..022c550881 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx
@@ -68,51 +68,6 @@ export default function JsonExplorerExample() {
           compFactory={JsonExplorerComp}
         />
       </ExampleGroup>
-
-      <ExampleGroup
-        title="Animation Style"
-        description="The Following Examples Show different animations on the JSON Explorer Component."
-        >
-        <Example
-          title="Bounce Animation"
-          hideSettings={true}
-          config={{
-            animationStyle: {
-            "animation": "bounce",
-            "animationDelay": "1s",
-            "animationDuration": "3s",
-            "animationIterationCount": "infinite"
-            },
-          }}
-          compFactory={JsonExplorerComp}
-        />
-        <Example
-          title="Swing Animation"
-          hideSettings={true}
-          config={{
-            animationStyle: {
-            "animation": "swing",
-            "animationDelay": "1s",
-            "animationDuration": "3s",
-            "animationIterationCount": "infinite"
-            },
-          }}
-          compFactory={JsonExplorerComp}
-        />
-        <Example
-        title="Tada Animation"
-        hideSettings={true}
-        config={{
-            animationStyle: {
-            "animation": "tada",
-            "animationDelay": "1s",
-            "animationDuration": "3s",
-            "animationIterationCount": "infinite"
-            },
-        }}
-        compFactory={JsonExplorerComp}
-      />
-      </ExampleGroup>
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx
index 834169e73a..84b9f1848a 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx
@@ -59,51 +59,6 @@ export default function jsonSchemaFormExample() {
           compFactory={JsonSchemaFormComp}
         />
       </ExampleGroup>
-
-      <ExampleGroup
-        title="Animation Style"
-        description="The Following Examples Show different animations on the JSON Schema Component."
-        >
-        <Example
-          title="Bounce Animation"
-          hideSettings={true}
-          config={{
-            animationStyle: {
-            "animation": "bounce",
-            "animationDelay": "1s",
-            "animationDuration": "3s",
-            "animationIterationCount": "infinite"
-            },
-          }}
-          compFactory={JsonSchemaFormComp}
-        />
-        <Example
-          title="Swing Animation"
-          hideSettings={true}
-          config={{
-            animationStyle: {
-            "animation": "swing",
-            "animationDelay": "1s",
-            "animationDuration": "3s",
-            "animationIterationCount": "infinite"
-            },
-          }}
-          compFactory={JsonSchemaFormComp}
-        />
-        <Example
-        title="Tada Animation"
-        hideSettings={true}
-        config={{
-            animationStyle: {
-            "animation": "tada",
-            "animationDelay": "1s",
-            "animationDuration": "3s",
-            "animationIterationCount": "infinite"
-            },
-        }}
-        compFactory={JsonSchemaFormComp}
-      />
-      </ExampleGroup>
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts b/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts
index ca2388e951..95748258ab 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts
@@ -97,6 +97,10 @@ import DrawerExample from "./ChartsComp/Drawer";
 import CollapsibleContainerExample from "./ContainersComp/CollapsibleContainer";
 import FloatTextContainerExample from "./ContainersComp/FloatTextContainer";
 import SplitLayoutExample from "./ContainersComp/SplitLayout";
+import BarChartExample from "./ChartsComp/BarChart";
+import LineChartExample from "./ChartsComp/LineChart";
+import PieChartExample from "./ChartsComp/PieChart";
+import ScatterChartExample from "./ChartsComp/ScatterChart";
 
 const examples: { [key in UICompType]?: React.FunctionComponent } = {
   button: ButtonExample,
@@ -171,6 +175,7 @@ const examples: { [key in UICompType]?: React.FunctionComponent } = {
   candleStickChart: CandleStickChartExample,
   grid: GridViewExample,
   modal: ModalExample,
+  barChart: BarChartExample,
   funnelChart: FunnelChartExample,
   gaugeChart: GaugeChartExample,
   graphChart: GraphChartExample,
@@ -197,6 +202,9 @@ const examples: { [key in UICompType]?: React.FunctionComponent } = {
   collapsibleContainer: CollapsibleContainerExample,
   floatTextContainer: FloatTextContainerExample,
   splitLayout: SplitLayoutExample,
+  lineChart: LineChartExample,
+  pieChart: PieChartExample,
+  scatterChart: ScatterChartExample,
 };
 
 export default examples;
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/comment.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/comment.tsx
index 1c4123a1d9..aac2f4d4d7 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/comment.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/comment.tsx
@@ -78,50 +78,6 @@ export default function CommentExample() {
         />
       </ExampleGroup>
 
-      <ExampleGroup
-        title="Animation Style"
-        description="The Following Examples Show different animations on the Comment Component."
-        >
-        <Example
-          title="Bounce Animation"
-          width={600}
-          config={{
-            animationStyle: {
-            "animation": "bounce",
-            "animationDelay": "1s",
-            "animationDuration": "3s",
-            "animationIterationCount": "infinite"
-            },
-          }}
-          compFactory={CommentComp}
-        />
-        <Example
-          title="Swing Animation"
-          width={600}
-          config={{
-            animationStyle: {
-            "animation": "swing",
-            "animationDelay": "1s",
-            "animationDuration": "3s",
-            "animationIterationCount": "infinite"
-            },
-          }}
-          compFactory={CommentComp}
-        />
-        <Example
-        title="Tada Animation"
-        width={600}
-        config={{
-            animationStyle: {
-            "animation": "tada",
-            "animationDelay": "1s",
-            "animationDuration": "3s",
-            "animationIterationCount": "infinite"
-            },
-        }}
-        compFactory={CommentComp}
-      />
-      </ExampleGroup>
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/customComponent.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/customComponent.tsx
index c405d11287..21fc40660c 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/customComponent.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/customComponent.tsx
@@ -8,16 +8,37 @@ export default function CustomCompExample() {
     <>
       <ExampleGroup
         title={trans("componentDoc.basicUsage")}
-        description="The Following Examples Show the Basic Usage of the Image Carousel Component."
+        description="The Following Examples Show the Basic Usage of the Custom Component."
       >
         <Example
-          title="Image Carousel Component"
+          title="Custom Component"
           width={500}
           height={500}
           config={{
           }}
           compFactory={CustomComp}
         />
+        <Example
+          title="Hiding the Custom Component"
+          width={500}
+          height={500}
+          config={{
+            "hidden": true,
+          }}
+          compFactory={CustomComp}
+        />
+        <Example
+          title="Styling of Custom Component"
+          width={500}
+          height={300}
+          config={{
+            "style":{
+              "margin": "10px",
+              "padding": "30px",
+            },
+          }}
+          compFactory={CustomComp}
+        />
       </ExampleGroup>
     </>
   );
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/fileViewer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/fileViewer.tsx
index f351eeef75..13993d8b8f 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/fileViewer.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/fileViewer.tsx
@@ -77,63 +77,6 @@ export default function FileViewerExample() {
           compFactory={FileViewerComp}
         />
       </ExampleGroup>
-
-      <ExampleGroup
-        title="Animation Style"
-        description="The Following Examples Show different animations on the Cascader Component."
-      >
-        <Example
-          title="Bounce Animation"
-          width={1000}
-          height={600}
-          blackListConfig={blackListConfig}
-          hideSettings={true}
-          config={{
-            src: "https://pdfa.org/wp-content/uploads/2021/06/The-Low-Code-Revolution-and-PDF.pdf",
-            animationStyle: {
-              "animation": "bounce",
-              "animationDelay": "1s",
-              "animationDuration": "3s",
-              "animationIterationCount": "infinite"
-            },
-          }}
-          compFactory={FileViewerComp}
-        />
-        <Example
-          title="Swing Animation"
-          width={1000}
-          height={600}
-          blackListConfig={blackListConfig}
-          hideSettings={true}
-          config={{
-            src: "https://pdfa.org/wp-content/uploads/2021/06/The-Low-Code-Revolution-and-PDF.pdf",
-             animationStyle: {
-              "animation": "swing",
-              "animationDelay": "1s",
-              "animationDuration": "3s",
-              "animationIterationCount": "infinite"
-            },
-          }}
-          compFactory={FileViewerComp}
-        />
-        <Example
-          title="Tada Animation"
-          width={1000}
-          height={600}
-          blackListConfig={blackListConfig}
-          hideSettings={true}
-          config={{
-            src: "https://pdfa.org/wp-content/uploads/2021/06/The-Low-Code-Revolution-and-PDF.pdf",
-            animationStyle: {
-              "animation": "tada",
-              "animationDelay": "1s",
-              "animationDuration": "3s",
-              "animationIterationCount": "infinite"
-            },
-          }}
-          compFactory={FileViewerComp}
-        />
-      </ExampleGroup>
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx
index 404e179084..73aa6d8205 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx
@@ -293,57 +293,6 @@ export default function GridViewExample() {
           compFactory={GridComp}
         />
       </ExampleGroup>
-
-      <ExampleGroup
-        title="Animation Style"
-        description="The Following Examples Show different animations on the List View Component."
-        >
-        <Example
-          title="Bounce Animation"
-          hideSettings={true}
-          config={{
-            noOfRows: rows,
-            container: container, 
-            animationStyle: {
-            "animation": "bounce",
-            "animationDelay": "1s",
-            "animationDuration": "3s",
-            "animationIterationCount": "infinite"
-            },
-          }}
-          compFactory={GridComp}
-        />
-        <Example
-          title="Swing Animation"
-          hideSettings={true}
-          config={{
-            noOfRows: rows,
-            container: container, 
-            animationStyle: {
-            "animation": "swing",
-            "animationDelay": "1s",
-            "animationDuration": "3s",
-            "animationIterationCount": "infinite"
-            },
-          }}
-          compFactory={GridComp}
-        />
-        <Example
-          title="Tada Animation"
-          hideSettings={true}
-          config={{
-            noOfRows: rows,
-            container: container, 
-            animationStyle: {
-            "animation": "tada",
-            "animationDelay": "1s",
-            "animationDuration": "3s",
-            "animationIterationCount": "infinite"
-            },
-          }}
-          compFactory={GridComp}
-        />
-      </ExampleGroup>
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx
index a00a6c1911..fe1873b157 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx
@@ -286,57 +286,6 @@ export default function ListViewExample() {
           compFactory={ListViewComp}
         />
       </ExampleGroup>
-
-      <ExampleGroup
-        title="Animation Style"
-        description="The Following Examples Show different animations on the List View Component."
-        >
-        <Example
-          title="Bounce Animation"
-          hideSettings={true}
-          config={{
-            noOfRows: rows,
-            container: container, 
-            animationStyle: {
-            "animation": "bounce",
-            "animationDelay": "1s",
-            "animationDuration": "3s",
-            "animationIterationCount": "infinite"
-            },
-          }}
-          compFactory={ListViewComp}
-        />
-        <Example
-          title="Swing Animation"
-          hideSettings={true}
-          config={{
-            noOfRows: rows,
-            container: container, 
-            animationStyle: {
-            "animation": "swing",
-            "animationDelay": "1s",
-            "animationDuration": "3s",
-            "animationIterationCount": "infinite"
-            },
-          }}
-          compFactory={ListViewComp}
-        />
-        <Example
-          title="Tada Animation"
-          hideSettings={true}
-          config={{
-            noOfRows: rows,
-            container: container, 
-            animationStyle: {
-            "animation": "tada",
-            "animationDelay": "1s",
-            "animationDuration": "3s",
-            "animationIterationCount": "infinite"
-            },
-          }}
-          compFactory={ListViewComp}
-        />
-      </ExampleGroup>
     </>
   );
 }

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1814.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1814.patch" target="_blank">pFad Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1814.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1814.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>