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 6370df675..22375e860 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx
@@ -11,14 +11,163 @@ export default function CalendarExample() {
     <>
       <ExampleGroup
         title={trans("componentDoc.basicUsage")}
-        description={trans("componentDoc.basicDemoDescription")}
+        description="The Following Examples Show the Basic Usage of the Calendar Component."
       >
         <Example
-          title={trans("componentDoc.default")}
+          title="Default Calendar"
+          width={700}
+          height={600}
           config={{
           }}
           compFactory={ChartCompWithDefault}
         />
+        <Example
+          title="Hiding the Calendar component"
+          width={700}
+          height={600}
+          config={{
+            hidden: true,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Advanced Options"
+        description="The Following Examples Show the Advance usage/options of the Calendar Component."
+      >
+        <Example
+          title="Editable - Double Click on a slot to add the Event"
+          width={700}
+          height={600}
+          config={{
+            editable: true,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Hiding Event Times"
+          width={700}
+          height={600}
+          config={{
+            showEventTime: false,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Hiding Weekends"
+          width={700}
+          height={600}
+          config={{
+            showWeekends: false,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Hiding All Day Option"
+          width={700}
+          height={600}
+          config={{
+            showAllDay: false,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Layout"
+        description="The Following Examples Show different Layout options of the Calendar Component."
+      >
+        <Example
+          title="Initial Calendar View - Year"
+          width={700}
+          height={600}
+          config={{
+            currentFreeView: "multiMonthYear",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Initial Calendar View - Month"
+          width={700}
+          height={600}
+          config={{
+            currentFreeView: "dayGridMonth",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Initial Calendar View - Week"
+          width={700}
+          height={600}
+          config={{
+            currentFreeView: "timeGridWeek",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Initial Calendar View - Week"
+          width={700}
+          height={600}
+          config={{
+            currentFreeView: "dayGridWeek",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Initial Calendar View - Day Event List"
+          width={700}
+          height={600}
+          config={{
+            currentFreeView: "dayGridDay",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Initial Calendar View - Time Event List"
+          width={700}
+          height={600}
+          config={{
+            currentFreeView: "timeGridDay",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Initial Calendar View - Event List"
+          width={700}
+          height={600}
+          config={{
+            currentFreeView: "listWeek",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Start From - Saturday"
+          width={700}
+          height={600}
+          config={{
+            firstDay: 6,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Start From - Monday"
+          width={700}
+          height={600}
+          config={{
+            firstDay: 1,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Show Vertical ScrollBar"
+          width={700}
+          height={600}
+          config={{
+            showVerticalScrollbar: true,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
       </ExampleGroup>
     </>
   );
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/CandleStickChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/CandleStickChart.tsx
index 544055abe..943c651a7 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/CandleStickChart.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/CandleStickChart.tsx
@@ -6,54 +6,45 @@ import ExampleGroup from "../../common/ExampleGroup";
 
 const ChartCompWithDefault = uiCompRegistry["candleStickChart"].comp;
 
-const defaultEchartsJsonOption = {
-  "xAxis": {
-    "data": [
-      "Day 1",
-      "Day 2",
-      "Day 3",
-      "Day 4",
-      "Day 5"
-    ]
-  },
-  "data": [
-    [
-      150,
-      100,
-      50,
-      200
-    ],
-    [
-      120,
-      220,
-      80,
-      180
-    ],
-    [
-      80,
-      150,
-      60,
-      130
-    ],
-    [
-      230,
-      130,
-      110,
-      190
-    ],
-    [
-      90,
-      180,
-      70,
-      160
-    ]
-  ]
-};
+const chartStyle= {
+  background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+  chartBorderColor: "#FDFAFA",
+  chartBorderStyle: "solid",
+  chartBorderWidth: "2",
+  chartBoxShadow: "200",
+  chartShadowColor: "#3377FF"
+}
 
-const echartsOption = JSON.stringify(defaultEchartsJsonOption);
+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 CandleStickChartExample() {
-  const blackListConfig: string[] = ["echartsOption"];
   return (
     <>
       <ExampleGroup
@@ -65,7 +56,6 @@ export default function CandleStickChartExample() {
           width={500}
           height={300}
           config={{
-            echartsOption: echartsOption,
           }}
           compFactory={ChartCompWithDefault}
         />
@@ -74,7 +64,6 @@ export default function CandleStickChartExample() {
           width={500}
           height={300}
           config={{
-            echartsOption: echartsOption,
             tooltip: false,
           }}
           compFactory={ChartCompWithDefault}
@@ -90,7 +79,6 @@ export default function CandleStickChartExample() {
           width={500}
           height={300}
           config={{
-            echartsOption: echartsOption,
             top: 20,
             right: 20,
             bottom: 20,
@@ -109,7 +97,6 @@ export default function CandleStickChartExample() {
           width={500}
           height={300}
           config={{
-            echartsOption: echartsOption,
             echartsTitleConfig: {
               "position": "left",
             },
@@ -121,7 +108,6 @@ export default function CandleStickChartExample() {
           width={500}
           height={300}
           config={{
-            echartsOption: echartsOption,
             echartsTitleConfig: {
               "position": "center",
             },
@@ -133,7 +119,6 @@ export default function CandleStickChartExample() {
           width={500}
           height={300}
           config={{
-            echartsOption: echartsOption,
             echartsTitleConfig: {
               "position": "right",
             },
@@ -145,7 +130,6 @@ export default function CandleStickChartExample() {
           width={500}
           height={300}
           config={{
-            echartsOption: echartsOption,
             echartsLegendConfig: {
               "position": "bottom",
             },
@@ -157,7 +141,6 @@ export default function CandleStickChartExample() {
           width={500}
           height={300}
           config={{
-            echartsOption: echartsOption,
             echartsLegendConfig: {
               "position": "top",
             },
@@ -165,6 +148,52 @@ export default function CandleStickChartExample() {
           compFactory={ChartCompWithDefault}
         />
       </ExampleGroup>
+
+      <ExampleGroup
+              title="Styling Properties"
+              description="The Following Examples Show the Styling Properties on the CandleStick 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/FunnelChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/FunnelChart.tsx
index 424b8a102..777f9dcfe 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/FunnelChart.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/FunnelChart.tsx
@@ -5,6 +5,43 @@ import Example from "../../common/Example";
 import ExampleGroup from "../../common/ExampleGroup";
 
 const ChartCompWithDefault = uiCompRegistry["funnelChart"].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 labelStyle = {
+  chartBoxShadow: "5",
+  chartFontFamily: "serif",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#020101",
+  chartTextColor: "#FFFFFF",
+  chartTextSize: "20",
+  chartTextWeight: "bold"
+}
+
+const legendStyle = {
+  chartBoxShadow: "5",
+  chartFontFamily: "serif",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#FFD701",
+  chartTextColor: "#7A7A7B",
+  chartTextSize: "20",
+  chartTextWeight: "bold"
+}
 
 export default function FunnelChartExample() {
   return (
@@ -301,6 +338,52 @@ export default function FunnelChartExample() {
           compFactory={ChartCompWithDefault}
         />
       </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the Styling Properties on the Funnel 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="Label Styling - Text, Fonts & Box Shadow"
+          width={500}
+          height={350}
+          hideSettings={true}
+          config={{
+            labelStyle: labelStyle,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Lagend Styling - Text, Fonts & Box Shadow"
+          width={500}
+          height={350}
+          hideSettings={true}
+          config={{
+            legendStyle: legendStyle,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx
index 5107be785..eac134170 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx
@@ -11,15 +11,138 @@ export default function GanttChartExample() {
     <>
       <ExampleGroup
         title={trans("componentDoc.basicUsage")}
-        description={trans("componentDoc.basicDemoDescription")}
+        description="The Following Examples Show the Basic Usage of the Component."
       >
         <Example
-          title={trans("componentDoc.default")}
+          title="Default Component"
+          width={1000}
           config={{
           }}
           compFactory={ChartCompWithDefault}
         />
       </ExampleGroup>
+
+      <ExampleGroup
+        title="Advance Usage"
+        description="The Following Examples Show the Advance Usage of the Gantt Chart Component."
+      >
+        <Example
+          title="View Mode - Hour"
+          width={1000}
+          config={{
+            headerHeight: "60",
+            activeViewMode: "Hour",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="View Mode - Quarter Day"
+          width={1000}
+          config={{
+            headerHeight: "60",
+            activeViewMode: "Quarter Day",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="View Mode - Half Day"
+          width={1000}
+          config={{
+            headerHeight: "60",
+            activeViewMode: "Half Day",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="View Mode - Day"
+          width={1000}
+          config={{
+            activeViewMode: "Day",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="View Mode - Week"
+          width={1000}
+          config={{
+            headerHeight: "60",
+            activeViewMode: "Week",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="View Mode - Month"
+          width={1000}
+          config={{
+            headerHeight: "60",
+            activeViewMode: "Month",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="View Mode - Year"
+          width={1000}
+          config={{
+            headerHeight: "60",
+            activeViewMode: "Year",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Layout"
+        description="The Following Examples Show the Layout options on the Gantt Chart Component."
+      >
+        <Example
+          title="Hiding Header"
+          width={1000}
+          config={{
+            showHeaders: false,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Hiding Table Legend"
+          width={1000}
+          config={{
+            showLegendTable: false,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Legend Width - 500px"
+          width={1000}
+          config={{
+            legendWidth: "500px",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Header Height - 50"
+          width={1000}
+          config={{
+            headerHeight: "50",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Row Height - 70"
+          width={1000}
+          config={{
+            rowHeight: "70",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Column Width - 100"
+          width={1000}
+          config={{
+            columnWidth: "100",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
     </>
   );
 }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx
index 7a57ee549..43d87a45d 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx
@@ -6,6 +6,170 @@ import ExampleGroup from "../../common/ExampleGroup";
 
 const ChartCompWithDefault = uiCompRegistry["gaugeChart"].comp;
 
+const barometerGuageOption = {
+  "data": [
+    {
+      "formatter": "{value}%",
+      "value": 58.46,
+      "name": "PLP",
+      "outline": {
+        "color": "#c80707",
+        "period": [
+          0,
+          100
+        ],
+        "splitNumber": 10,
+        "progressBarWidth": 2,
+        "axisTickLength": 6,
+        "axisTickWidth": 2,
+        "radius": "70%"
+      },
+      "inline": {
+        "color": "#000000",
+        "period": [
+          0,
+          60
+        ],
+        "progressBarWidth": 2,
+        "splitNumber": 6,
+        "axisTickLength": 6,
+        "axisTickWidth": 2,
+        "radius": "60%"
+      }
+    }
+  ]
+};
+
+const clockGuageOption = {
+  "data": [
+    {
+      "outlineColor": "#aa2a2a",
+      "anchor": {
+        "color": "#cfae09",
+        "size": 10
+      },
+      "hour": {
+        "color": "#cfae09",
+        "width": 4,
+        "length": 50,
+        "value": 4
+      },
+      "minute": {
+        "color": "#cfae09",
+        "width": 2.5,
+        "length": 65,
+        "value": 30
+      },
+      "second": {
+        "color": "#cfae09",
+        "width": 1,
+        "length": 90,
+        "value": 45
+      }
+    }
+  ]
+};
+
+const gradeGuageOption = {
+  "data": [
+    {
+      "value": 80,
+      "name": "Grade Rating",
+      "formatter": "{value} %",
+      "color": [
+        [
+          0.25,
+          "#FF6E76"
+        ],
+        [
+          0.5,
+          "#FDDD60"
+        ],
+        [
+          0.75,
+          "#58D9F9"
+        ],
+        [
+          1,
+          "#7CFFB2"
+        ]
+      ]
+    }
+  ]
+};
+
+const multiTitleGuageOption = {
+  "data": [
+    {
+      "formatter": "{value}%",
+      "value": [
+        {
+          "color": "#19b1e6",
+          "title": "Perfect",
+          "value": 20,
+          "titlePosition": [
+            "-60%",
+            "60%"
+          ],
+          "valuePosition": [
+            "-60%",
+            "80%"
+          ]
+        },
+        {
+          "color": "#fac858",
+          "title": "Good",
+          "value": 40,
+          "titlePosition": [
+            "0%",
+            "60%"
+          ],
+          "valuePosition": [
+            "0%",
+            "80%"
+          ]
+        },
+        {
+          "color": "#09f64d",
+          "title": "Commonly",
+          "value": 60,
+          "titlePosition": [
+            "60%",
+            "60%"
+          ],
+          "valuePosition": [
+            "60%",
+            "80%"
+          ]
+        }
+      ]
+    }
+  ]
+};
+
+const stageGuageOption = {
+  "data": [
+    {
+      "value": 80,
+      "formatter": "{value} Km/h",
+      "color": [
+        [
+          0.3,
+          "#67e0e3"
+        ],
+        [
+          0.7,
+          "#37a2da"
+        ],
+        [
+          1,
+          "#fd666d"
+        ]
+      ]
+    }
+  ]
+};
+
 export default function GaugeChartExample() {
   return (
     <>
@@ -26,7 +190,8 @@ export default function GaugeChartExample() {
           width={500}
           height={300}
           config={{
-            chartType: "stageGuage",
+            chartType: "stageGauge",
+            echartsTitle: "Stage Speed Gauge",
           }}
           compFactory={ChartCompWithDefault}
         />
@@ -35,7 +200,8 @@ export default function GaugeChartExample() {
           width={500}
           height={300}
           config={{
-            chartType: "gradeGuage",
+            chartType: "gradeGauge",
+            echartsTitle: "Grade Gauge",
           }}
           compFactory={ChartCompWithDefault}
         />
@@ -44,25 +210,230 @@ export default function GaugeChartExample() {
           width={500}
           height={300}
           config={{
-            chartType: "temperatureGuage",
+            chartType: "temperatureGauge",
+            echartsTitle: "Temperature Gauge Chart",
           }}
           compFactory={ChartCompWithDefault}
         />
         <Example
-          title="Chart Type - Temperature Guage"
+          title="Chart Type - Multi Title Guage"
           width={500}
           height={300}
           config={{
-            chartType: "multiGuage",
+            chartType: "multiGauge",
+            echartsTitle: "Multi Title Gauge",
           }}
           compFactory={ChartCompWithDefault}
         />
         <Example
-          title="Chart Type - Temperature Guage"
+          title="Chart Type - Clock Guage"
+          width={500}
+          height={300}
+          config={{
+            chartType: "clockGauge",
+            echartsTitle: "Clock Gauge",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Chart Type - Ring Guage"
+          width={500}
+          height={300}
+          config={{
+            chartType: "ringGauge",
+            echartsTitle: "Ring Gauge",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Chart Type - Guage Barometer Chart"
+          width={500}
+          height={300}
+          config={{
+            chartType: "barometerGauge",
+            echartsTitle: "Gauge Barometer Chart",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Charts Configuration - Layout & Styling"
+        description="The Following Examples Show the Layout & Styling options on different Chart components"
+      >
+        <Example
+          title="Radius Configuration - Small Circle"
+          width={500}
+          height={300}
+          config={{
+            chartType: "ringGauge",
+            radius: "50",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Radius Configuration - Large Circle"
+          width={500}
+          height={300}
+          config={{
+            chartType: "ringGauge",
+            radius: "90",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Position Configuration - X and Y axis"
+          width={500}
+          height={300}
+          config={{
+            chartType: "ringGauge",
+            position_x: "20",
+            position_y: "30",
+            radius: "60",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Position Configuration - X and Y axis"
+          width={500}
+          height={300}
+          config={{
+            chartType: "ringGauge",
+            position_x: "80",
+            position_y: "70",
+            radius: "60",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Progress Bar Width"
+          width={500}
+          height={300}
+          config={{
+            chartType: "ringGauge",
+            ringProgressBarWidth: "20",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Progress Bar Width"
+          width={500}
+          height={300}
+          config={{
+            chartType: "ringGauge",
+            ringProgressBarWidth: "60",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Start Angle"
+          width={500}
+          height={300}
+          config={{
+            chartType: "temperatureGauge",
+            startAngle: "160",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="End Angle"
+          width={500}
+          height={300}
+          config={{
+            chartType: "temperatureGauge",
+            endAngle: "70",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Split Number - 10"
+          width={500}
+          height={300}
+          config={{
+            chartType: "temperatureGauge",
+            splitNumber: "10",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Split Number - 20"
+          width={500}
+          height={300}
+          config={{
+            chartType: "temperatureGauge",
+            splitNumber: "20",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Axis Tick Length"
+          width={500}
+          height={300}
+          config={{
+            chartType: "temperatureGauge",
+            axisTickLength: "20",
+            position_y: "70",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Axis Tick Width"
+          width={500}
+          height={300}
+          config={{
+            chartType: "temperatureGauge",
+            axisTickWidth: "5",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Axis Tick Color"
+          width={500}
+          height={300}
+          config={{
+            chartType: "temperatureGauge",
+            axisTickColor: "#222222",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Axis Label Distance"
+          width={500}
+          height={300}
+          config={{
+            chartType: "temperatureGauge",
+            axisLabelDistance: "40",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Pointer Length"
+          width={500}
+          height={300}
+          config={{
+            chartType: "barometerGauge",
+            barometerPointerLength: "170",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Pointer Width"
+          width={500}
+          height={300}
+          config={{
+            chartType: "barometerGauge",
+            barometerPointerWidth: "15",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Pointer Position"
           width={500}
           height={300}
           config={{
-            chartType: "clockGuage",
+            chartType: "barometerGauge",
+            barometerPointer_Y: "30",
+            barometerPointerLength: "80",
           }}
           compFactory={ChartCompWithDefault}
         />
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GeoMapChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GeoMapChart.tsx
index dd6bf3fb5..7ce9f66db 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GeoMapChart.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GeoMapChart.tsx
@@ -6,27 +6,7 @@ import ExampleGroup from "../../common/ExampleGroup";
 
 const ChartCompWithDefault = uiCompRegistry["chartsGeoMap"].comp;
 
-const defaultDataSource = "[\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Administration\",\n    \"spending\": 9003,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Finance\",\n    \"spending\": 3033,\n    \"budget\": 4000\n  },\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Sales\",\n    \"spending\": 9230,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Administration\",\n    \"spending\": 13032,\n    \"budget\": 15000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Finance\",\n    \"spending\": 2300,\n    \"budget\": 5000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Sales\",\n    \"spending\": 7323.5,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Administration\",\n    \"spending\": 13000,\n    \"budget\": 16023\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Finance\",\n    \"spending\": 3569.5,\n    \"budget\": 3000\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Sales\",\n    \"spending\": 10000,\n    \"budget\": 9932\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Administration\",\n    \"spending\": 18033,\n    \"budget\": 20000\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Finance\",\n    \"spending\": 4890,\n    \"budget\": 4500\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Sales\",\n    \"spending\": 9322,\n    \"budget\": 8000\n  }\n]";
-
-const defaultEchartsJsonOption = "{\n  \"xAxis\": {\n    \"data\": [\n      \"Day 1\",\n      \"Day 2\",\n      \"Day 3\",\n      \"Day 4\",\n      \"Day 5\"\n    ]\n  },\n  \"data\": [\n    [\n      100,\n      200,\n      50,\n      150\n    ],\n    [\n      120,\n      220,\n      80,\n      180\n    ],\n    [\n      80,\n      150,\n      60,\n      130\n    ],\n    [\n      130,\n      230,\n      110,\n      190\n    ],\n    [\n      90,\n      180,\n      70,\n      160\n    ]\n  ]\n}";
-
-const data = JSON.stringify(defaultDataSource);
-const echartsOption = JSON.stringify(defaultEchartsJsonOption);
-
 export default function GeoMapChartExample() {
-  const blackListConfig: string[] = ["data", "echartsOption", "series"];
-  const series = [
-    {
-        "columnName": "spending",
-        "seriesName": "Spending",
-        "dataIndex": "f011b34c"
-    },
-    {
-        "columnName": "budget",
-        "seriesName": "Budget",
-        "dataIndex": "30e02269"
-    }
-];
   return (
     <>
       <ExampleGroup
@@ -37,11 +17,76 @@ export default function GeoMapChartExample() {
           title={trans("componentDoc.default")}
           width={500}
           height={300}
-          blackListConfig={blackListConfig}
           config={{
-            mode: "json",
-            data: data,
-            series: series,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title={trans("componentDoc.basicUsage")}
+        description={trans("componentDoc.basicDemoDescription")}
+      >
+        <Example
+          title="Zoom Level - 1"
+          width={500}
+          height={300}
+          config={{
+            mapZoomLevel: "1",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Zoom Level - 3"
+          width={500}
+          height={300}
+          config={{
+            mapZoomLevel: "3",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Zoom Level - 5"
+          width={500}
+          height={300}
+          config={{
+            mapZoomLevel: "5",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Center Position ( Lat, Long) - Spain"
+          width={700}
+          height={300}
+          hideSettings={true}
+          config={{
+            mapCenterLng: "-0.5033",
+            mapCenterLat: "40.5235",
+            mapZoomLevel: "5",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Center Position ( Lat, Lon) - USA"
+          width={700}
+          height={300}
+          hideSettings={true}
+          config={{
+            mapCenterLng: "-97.5348",
+            mapCenterLat: "38.7946",
+            mapZoomLevel: "5",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Center Position ( Lat, Lon) - Turkey"
+          width={700}
+          height={300}
+          hideSettings={true}
+          config={{
+            mapCenterLng: "38.5348",
+            mapCenterLat: "38.7946",
+            mapZoomLevel: "5",
           }}
           compFactory={ChartCompWithDefault}
         />
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GraphChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GraphChart.tsx
index 3024a613b..b19bf5f6e 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GraphChart.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GraphChart.tsx
@@ -6,27 +6,25 @@ import ExampleGroup from "../../common/ExampleGroup";
 
 const ChartCompWithDefault = uiCompRegistry["graphChart"].comp;
 
-const defaultDataSource = "[\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Administration\",\n    \"spending\": 9003,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Finance\",\n    \"spending\": 3033,\n    \"budget\": 4000\n  },\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Sales\",\n    \"spending\": 9230,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Administration\",\n    \"spending\": 13032,\n    \"budget\": 15000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Finance\",\n    \"spending\": 2300,\n    \"budget\": 5000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Sales\",\n    \"spending\": 7323.5,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Administration\",\n    \"spending\": 13000,\n    \"budget\": 16023\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Finance\",\n    \"spending\": 3569.5,\n    \"budget\": 3000\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Sales\",\n    \"spending\": 10000,\n    \"budget\": 9932\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Administration\",\n    \"spending\": 18033,\n    \"budget\": 20000\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Finance\",\n    \"spending\": 4890,\n    \"budget\": 4500\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Sales\",\n    \"spending\": 9322,\n    \"budget\": 8000\n  }\n]";
-
-const defaultEchartsJsonOption = "{\n  \"xAxis\": {\n    \"data\": [\n      \"Day 1\",\n      \"Day 2\",\n      \"Day 3\",\n      \"Day 4\",\n      \"Day 5\"\n    ]\n  },\n  \"data\": [\n    [\n      100,\n      200,\n      50,\n      150\n    ],\n    [\n      120,\n      220,\n      80,\n      180\n    ],\n    [\n      80,\n      150,\n      60,\n      130\n    ],\n    [\n      130,\n      230,\n      110,\n      190\n    ],\n    [\n      90,\n      180,\n      70,\n      160\n    ]\n  ]\n}";
+const chartStyle= {
+  background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+  chartBorderColor: "#FDFAFA",
+  chartBorderStyle: "solid",
+  chartBorderWidth: "2",
+  chartBoxShadow: "200",
+  chartShadowColor: "#3377FF"
+}
 
-const data = JSON.stringify(defaultDataSource);
-const echartsOption = JSON.stringify(defaultEchartsJsonOption);
+const titleStyle = {
+  chartBoxShadow: "9",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#FFBD01",
+  chartTextColor: "#36B389",
+  chartTextSize: "30",
+  chartTextWeight: "Bold"
+}
 
 export default function GraphChartExample() {
-  const blackListConfig: string[] = ["data", "echartsOption", "series"];
-  const series = [
-    {
-        "columnName": "spending",
-        "seriesName": "Spending",
-        "dataIndex": "f011b34c"
-    },
-    {
-        "columnName": "budget",
-        "seriesName": "Budget",
-        "dataIndex": "30e02269"
-    }
-];
   return (
     <>
       <ExampleGroup
@@ -37,11 +35,34 @@ export default function GraphChartExample() {
           title={trans("componentDoc.default")}
           width={500}
           height={300}
-          blackListConfig={blackListConfig}
+          hideSettings={true}
+          config={{
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the Styling Properties on the Graph 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={{
-            mode: "json",
-            data: data,
-            series: series,
+            titleStyle: titleStyle,
           }}
           compFactory={ChartCompWithDefault}
         />
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HeatmapChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HeatmapChart.tsx
index c2a60b7eb..0c82cdd08 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HeatmapChart.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HeatmapChart.tsx
@@ -6,27 +6,45 @@ import ExampleGroup from "../../common/ExampleGroup";
 
 const ChartCompWithDefault = uiCompRegistry["heatmapChart"].comp;
 
-const defaultDataSource = "[\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Administration\",\n    \"spending\": 9003,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Finance\",\n    \"spending\": 3033,\n    \"budget\": 4000\n  },\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Sales\",\n    \"spending\": 9230,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Administration\",\n    \"spending\": 13032,\n    \"budget\": 15000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Finance\",\n    \"spending\": 2300,\n    \"budget\": 5000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Sales\",\n    \"spending\": 7323.5,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Administration\",\n    \"spending\": 13000,\n    \"budget\": 16023\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Finance\",\n    \"spending\": 3569.5,\n    \"budget\": 3000\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Sales\",\n    \"spending\": 10000,\n    \"budget\": 9932\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Administration\",\n    \"spending\": 18033,\n    \"budget\": 20000\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Finance\",\n    \"spending\": 4890,\n    \"budget\": 4500\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Sales\",\n    \"spending\": 9322,\n    \"budget\": 8000\n  }\n]";
+const chartStyle= {
+  background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+  chartBorderColor: "#FDFAFA",
+  chartBorderStyle: "solid",
+  chartBorderWidth: "2",
+  chartBoxShadow: "200",
+  chartShadowColor: "#3377FF"
+}
 
-const defaultEchartsJsonOption = "{\n  \"xAxis\": {\n    \"data\": [\n      \"Day 1\",\n      \"Day 2\",\n      \"Day 3\",\n      \"Day 4\",\n      \"Day 5\"\n    ]\n  },\n  \"data\": [\n    [\n      100,\n      200,\n      50,\n      150\n    ],\n    [\n      120,\n      220,\n      80,\n      180\n    ],\n    [\n      80,\n      150,\n      60,\n      130\n    ],\n    [\n      130,\n      230,\n      110,\n      190\n    ],\n    [\n      90,\n      180,\n      70,\n      160\n    ]\n  ]\n}";
+const titleStyle = {
+  chartBoxShadow: "9",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#FFBD01",
+  chartTextColor: "#36B389",
+  chartTextSize: "30",
+  chartTextWeight: "Bold"
+}
 
-const data = JSON.stringify(defaultDataSource);
-const echartsOption = JSON.stringify(defaultEchartsJsonOption);
+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 HeatmapChartExample() {
-  const blackListConfig: string[] = ["data", "echartsOption", "series"];
-  const series = [
-    {
-        "columnName": "spending",
-        "seriesName": "Spending",
-        "dataIndex": "f011b34c"
-    },
-    {
-        "columnName": "budget",
-        "seriesName": "Budget",
-        "dataIndex": "30e02269"
-    }
-];
   return (
     <>
       <ExampleGroup
@@ -37,14 +55,191 @@ export default function HeatmapChartExample() {
           title={trans("componentDoc.default")}
           width={500}
           height={300}
-          blackListConfig={blackListConfig}
+          hideSettings={true}
+          config={{
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Alignment & Layout"
+        description="The Following Examples Show the different alignment option on the Heatmap Chart Component."
+      >
+        <Example
+          title="Title Position - Left"
+          width={500}
+          height={350}
+          config={{
+            echartsTitleConfig : {
+            "position" : "left",
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Title Position - Center"
+          width={500}
+          height={350}
+          config={{
+             echartsTitleConfig : {
+                "position" : "center",
+              }
+            }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Title Position - Right"
+          width={500}
+          height={350}
           config={{
-            mode: "json",
-            data: data,
-            series: series,
+            echartsTitleConfig : {
+              "position" : "right",
+            }
           }}
           compFactory={ChartCompWithDefault}
         />
+        <Example
+          title="Legend Position - Top"
+          width={500}
+          height={350}
+          config={{
+            echartsLegendConfig : {
+              "position" : "top",
+            },
+            echartsTitleConfig : {
+              "position" : "left",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Lagend Position - Bottom"
+          width={500}
+          height={350}
+          config={{
+            echartsLegendConfig : {
+              "position" : "bottom",
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Legend Orientation + Position - Vertical + Left"
+          width={500}
+          height={350}
+          config={{
+            echartsLegendOrientConfig: {
+              orient: "vertical"
+            },
+            echartsLegendAlignConfig: {
+              left: "left"
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Legend Orientation + Position - Horizontal + Center"
+          width={500}
+          height={350}
+          config={{
+            echartsLegendOrientConfig: {
+              orient: "horizontal"
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Legend Orientation + Position - Vertical + Right"
+          width={500}
+          height={350}
+          config={{
+            echartsLegendOrientConfig: {
+              orient: "vertical"
+            },
+            echartsLegendAlignConfig: {
+              left: "right"
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Hiding Labels"
+          width={500}
+          height={350}
+          config={{
+            echartsLabelConfig: {
+              labelVisibility: false,
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Chart Position - Top & Left"
+          width={500}
+          height={350}
+          config={{
+            top: "0",
+            left: "0",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Chart Position - Bottom & Right"
+          width={500}
+          height={350}
+          config={{
+            bottom: "0",
+            right: "0",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the Styling Properties on the HeatMap 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/HillChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx
index 09d371666..f7fd46951 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx
@@ -11,10 +11,12 @@ export default function HillChartExample() {
     <>
       <ExampleGroup
         title={trans("componentDoc.basicUsage")}
-        description={trans("componentDoc.basicDemoDescription")}
+        description="The Following Examples Show the Basic Usage of the Hill Chart Component."
       >
         <Example
-          title={trans("componentDoc.default")}
+          title="Default Hill Chart"
+          hideSettings={true}
+          width={700}
           config={{
           }}
           compFactory={ChartCompWithDefault}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/MermaidChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/MermaidChart.tsx
index e27c85d4d..4fad532f5 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/MermaidChart.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/MermaidChart.tsx
@@ -6,27 +6,7 @@ import ExampleGroup from "../../common/ExampleGroup";
 
 const ChartCompWithDefault = uiCompRegistry["mermaid"].comp;
 
-const defaultDataSource = "[\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Administration\",\n    \"spending\": 9003,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Finance\",\n    \"spending\": 3033,\n    \"budget\": 4000\n  },\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Sales\",\n    \"spending\": 9230,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Administration\",\n    \"spending\": 13032,\n    \"budget\": 15000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Finance\",\n    \"spending\": 2300,\n    \"budget\": 5000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Sales\",\n    \"spending\": 7323.5,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Administration\",\n    \"spending\": 13000,\n    \"budget\": 16023\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Finance\",\n    \"spending\": 3569.5,\n    \"budget\": 3000\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Sales\",\n    \"spending\": 10000,\n    \"budget\": 9932\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Administration\",\n    \"spending\": 18033,\n    \"budget\": 20000\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Finance\",\n    \"spending\": 4890,\n    \"budget\": 4500\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Sales\",\n    \"spending\": 9322,\n    \"budget\": 8000\n  }\n]";
-
-const defaultEchartsJsonOption = "{\n  \"xAxis\": {\n    \"data\": [\n      \"Day 1\",\n      \"Day 2\",\n      \"Day 3\",\n      \"Day 4\",\n      \"Day 5\"\n    ]\n  },\n  \"data\": [\n    [\n      100,\n      200,\n      50,\n      150\n    ],\n    [\n      120,\n      220,\n      80,\n      180\n    ],\n    [\n      80,\n      150,\n      60,\n      130\n    ],\n    [\n      130,\n      230,\n      110,\n      190\n    ],\n    [\n      90,\n      180,\n      70,\n      160\n    ]\n  ]\n}";
-
-const data = JSON.stringify(defaultDataSource);
-const echartsOption = JSON.stringify(defaultEchartsJsonOption);
-
 export default function MermaidChartExample() {
-  const blackListConfig: string[] = ["data", "echartsOption", "series"];
-  const series = [
-    {
-        "columnName": "spending",
-        "seriesName": "Spending",
-        "dataIndex": "f011b34c"
-    },
-    {
-        "columnName": "budget",
-        "seriesName": "Budget",
-        "dataIndex": "30e02269"
-    }
-];
   return (
     <>
       <ExampleGroup
@@ -34,14 +14,19 @@ export default function MermaidChartExample() {
         description={trans("componentDoc.basicDemoDescription")}
       >
         <Example
-          title={trans("componentDoc.default")}
+          title="Default Component"
+          width={500}
+          height={300}
+          config={{
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Custom Component"
           width={500}
           height={300}
-          blackListConfig={blackListConfig}
           config={{
-            mode: "json",
-            data: data,
-            series: series,
+            code: "graph LR\n Planning --> Defining --> Designing --> Building --> Testing --> Deployment --> Planning",
           }}
           compFactory={ChartCompWithDefault}
         />
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/OpenLayersGeoMap.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/OpenLayersGeoMap.tsx
index 306871822..ac8287742 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/OpenLayersGeoMap.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/OpenLayersGeoMap.tsx
@@ -6,27 +6,7 @@ import ExampleGroup from "../../common/ExampleGroup";
 
 const ChartCompWithDefault = uiCompRegistry["openLayersGeoMap"].comp;
 
-const defaultDataSource = "[\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Administration\",\n    \"spending\": 9003,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Finance\",\n    \"spending\": 3033,\n    \"budget\": 4000\n  },\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Sales\",\n    \"spending\": 9230,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Administration\",\n    \"spending\": 13032,\n    \"budget\": 15000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Finance\",\n    \"spending\": 2300,\n    \"budget\": 5000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Sales\",\n    \"spending\": 7323.5,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Administration\",\n    \"spending\": 13000,\n    \"budget\": 16023\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Finance\",\n    \"spending\": 3569.5,\n    \"budget\": 3000\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Sales\",\n    \"spending\": 10000,\n    \"budget\": 9932\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Administration\",\n    \"spending\": 18033,\n    \"budget\": 20000\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Finance\",\n    \"spending\": 4890,\n    \"budget\": 4500\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Sales\",\n    \"spending\": 9322,\n    \"budget\": 8000\n  }\n]";
-
-const defaultEchartsJsonOption = "{\n  \"xAxis\": {\n    \"data\": [\n      \"Day 1\",\n      \"Day 2\",\n      \"Day 3\",\n      \"Day 4\",\n      \"Day 5\"\n    ]\n  },\n  \"data\": [\n    [\n      100,\n      200,\n      50,\n      150\n    ],\n    [\n      120,\n      220,\n      80,\n      180\n    ],\n    [\n      80,\n      150,\n      60,\n      130\n    ],\n    [\n      130,\n      230,\n      110,\n      190\n    ],\n    [\n      90,\n      180,\n      70,\n      160\n    ]\n  ]\n}";
-
-const data = JSON.stringify(defaultDataSource);
-const echartsOption = JSON.stringify(defaultEchartsJsonOption);
-
 export default function OpenLayersGeoMapChartExample() {
-  const blackListConfig: string[] = ["data", "echartsOption", "series"];
-  const series = [
-    {
-        "columnName": "spending",
-        "seriesName": "Spending",
-        "dataIndex": "f011b34c"
-    },
-    {
-        "columnName": "budget",
-        "seriesName": "Budget",
-        "dataIndex": "30e02269"
-    }
-];
   return (
     <>
       <ExampleGroup
@@ -37,11 +17,43 @@ export default function OpenLayersGeoMapChartExample() {
           title={trans("componentDoc.default")}
           width={500}
           height={300}
-          blackListConfig={blackListConfig}
           config={{
-            mode: "json",
-            data: data,
-            series: series,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Center Position - USA"
+          width={500}
+          height={300}
+          config={{
+            center: "[-92.5348,38.7946]",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Zoom Level - 3"
+          width={500}
+          height={300}
+          config={{
+            zoom: "3",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Zoom Level - 7"
+          width={500}
+          height={300}
+          config={{
+            zoom: "7",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Zoom Level - 10"
+          width={500}
+          height={300}
+          config={{
+            zoom: "10",
           }}
           compFactory={ChartCompWithDefault}
         />
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/RadarChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/RadarChart.tsx
index 662ece815..5a211eea9 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/RadarChart.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/RadarChart.tsx
@@ -6,27 +6,45 @@ import ExampleGroup from "../../common/ExampleGroup";
 
 const ChartCompWithDefault = uiCompRegistry["radarChart"].comp;
 
-const defaultDataSource = "[\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Administration\",\n    \"spending\": 9003,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Finance\",\n    \"spending\": 3033,\n    \"budget\": 4000\n  },\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Sales\",\n    \"spending\": 9230,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Administration\",\n    \"spending\": 13032,\n    \"budget\": 15000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Finance\",\n    \"spending\": 2300,\n    \"budget\": 5000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Sales\",\n    \"spending\": 7323.5,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Administration\",\n    \"spending\": 13000,\n    \"budget\": 16023\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Finance\",\n    \"spending\": 3569.5,\n    \"budget\": 3000\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Sales\",\n    \"spending\": 10000,\n    \"budget\": 9932\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Administration\",\n    \"spending\": 18033,\n    \"budget\": 20000\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Finance\",\n    \"spending\": 4890,\n    \"budget\": 4500\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Sales\",\n    \"spending\": 9322,\n    \"budget\": 8000\n  }\n]";
+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 defaultEchartsJsonOption = "{\n  \"xAxis\": {\n    \"data\": [\n      \"Day 1\",\n      \"Day 2\",\n      \"Day 3\",\n      \"Day 4\",\n      \"Day 5\"\n    ]\n  },\n  \"data\": [\n    [\n      100,\n      200,\n      50,\n      150\n    ],\n    [\n      120,\n      220,\n      80,\n      180\n    ],\n    [\n      80,\n      150,\n      60,\n      130\n    ],\n    [\n      130,\n      230,\n      110,\n      190\n    ],\n    [\n      90,\n      180,\n      70,\n      160\n    ]\n  ]\n}";
+const labelStyle = {
+  chartBoxShadow: "5",
+  chartFontFamily: "serif",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#020101",
+  chartTextColor: "#FFFFFF",
+  chartTextSize: "20",
+  chartTextWeight: "bold"
+}
 
-const data = JSON.stringify(defaultDataSource);
-const echartsOption = JSON.stringify(defaultEchartsJsonOption);
+const legendStyle = {
+  chartBoxShadow: "5",
+  chartFontFamily: "serif",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#FFD701",
+  chartTextColor: "#7A7A7B",
+  chartTextSize: "20",
+  chartTextWeight: "bold"
+}
 
 export default function RadarChartExample() {
-  const blackListConfig: string[] = ["data", "echartsOption", "series"];
-  const series = [
-    {
-        "columnName": "spending",
-        "seriesName": "Spending",
-        "dataIndex": "f011b34c"
-    },
-    {
-        "columnName": "budget",
-        "seriesName": "Budget",
-        "dataIndex": "30e02269"
-    }
-];
   return (
     <>
       <ExampleGroup
@@ -37,15 +55,208 @@ export default function RadarChartExample() {
           title={trans("componentDoc.default")}
           width={500}
           height={300}
-          blackListConfig={blackListConfig}
+          hideSettings={true}
           config={{
-            mode: "json",
-            data: data,
-            series: series,
           }}
           compFactory={ChartCompWithDefault}
         />
       </ExampleGroup>
+
+      <ExampleGroup
+        title="Alignment & Layout"
+        description="The Following Examples Show the different alignment option on the Radar Chart Component."
+      >
+        <Example
+          title="Title Position - Left"
+          width={500}
+          height={350}
+          config={{
+            echartsTitleConfig : {
+            "position" : "left",
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Title Position - Center"
+          width={500}
+          height={350}
+          config={{
+              echartsTitleConfig : {
+                "position" : "center",
+              }
+            }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Title Position - Right"
+          width={500}
+          height={350}
+          config={{
+            echartsTitleConfig : {
+              "position" : "right",
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Legend Position - Top"
+          width={500}
+          height={350}
+          config={{
+            echartsLegendConfig : {
+              "position" : "top",
+            },
+            echartsTitleConfig : {
+              "position" : "left",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Lagend Position - Bottom"
+          width={500}
+          height={350}
+          config={{
+            echartsLegendConfig : {
+              "position" : "bottom",
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Legend Orientation + Position - Vertical + Left"
+          width={500}
+          height={350}
+          config={{
+            echartsLegendOrientConfig: {
+              orient: "vertical"
+            },
+            echartsLegendAlignConfig: {
+              left: "left"
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Legend Orientation + Position - Horizontal + Center"
+          width={500}
+          height={350}
+          config={{
+            echartsLegendOrientConfig: {
+              orient: "horizontal"
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Legend Orientation + Position - Vertical + Right"
+          width={500}
+          height={350}
+          config={{
+            echartsLegendOrientConfig: {
+              orient: "vertical"
+            },
+            echartsLegendAlignConfig: {
+              left: "right"
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Hiding Labels"
+          width={500}
+          height={350}
+          config={{
+            echartsLabelConfig: {
+              labelVisibility: false,
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="X-Axis Position"
+          width={500}
+          height={350}
+          config={{
+            position_x: "25",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Y-Axis Position"
+          width={500}
+          height={350}
+          config={{
+            position_y: "30",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Hiding Area Flag"
+          width={500}
+          height={350}
+          config={{
+            areaFlag: false,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Hiding Legends"
+          width={500}
+          height={350}
+          config={{
+            legendVisibility: false,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+              description="The Following Examples Show the Styling Properties on the Radar 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="Label Styling - Text, Fonts & Box Shadow"
+                width={500}
+                height={350}
+                hideSettings={true}
+                config={{
+                  labelStyle: labelStyle,
+                }}
+                compFactory={ChartCompWithDefault}
+              />
+              <Example
+                title="Lagend Styling - Text, Fonts & Box Shadow"
+                width={500}
+                height={350}
+                hideSettings={true}
+                config={{
+                  legendStyle: legendStyle,
+                }}
+                compFactory={ChartCompWithDefault}
+              />
+      </ExampleGroup>
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SankeyChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SankeyChart.tsx
index c169e7b37..5a2981536 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SankeyChart.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SankeyChart.tsx
@@ -6,27 +6,42 @@ import ExampleGroup from "../../common/ExampleGroup";
 
 const ChartCompWithDefault = uiCompRegistry["sankeyChart"].comp;
 
-const defaultDataSource = "[\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Administration\",\n    \"spending\": 9003,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Finance\",\n    \"spending\": 3033,\n    \"budget\": 4000\n  },\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Sales\",\n    \"spending\": 9230,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Administration\",\n    \"spending\": 13032,\n    \"budget\": 15000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Finance\",\n    \"spending\": 2300,\n    \"budget\": 5000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Sales\",\n    \"spending\": 7323.5,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Administration\",\n    \"spending\": 13000,\n    \"budget\": 16023\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Finance\",\n    \"spending\": 3569.5,\n    \"budget\": 3000\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Sales\",\n    \"spending\": 10000,\n    \"budget\": 9932\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Administration\",\n    \"spending\": 18033,\n    \"budget\": 20000\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Finance\",\n    \"spending\": 4890,\n    \"budget\": 4500\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Sales\",\n    \"spending\": 9322,\n    \"budget\": 8000\n  }\n]";
+const chartStyle= {
+  background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+  chartBorderColor: "#FDFAFA",
+  chartBorderStyle: "solid",
+  chartBorderWidth: "2",
+  chartBoxShadow: "200",
+  chartShadowColor: "#3377FF"
+}
 
-const defaultEchartsJsonOption = "{\n  \"xAxis\": {\n    \"data\": [\n      \"Day 1\",\n      \"Day 2\",\n      \"Day 3\",\n      \"Day 4\",\n      \"Day 5\"\n    ]\n  },\n  \"data\": [\n    [\n      100,\n      200,\n      50,\n      150\n    ],\n    [\n      120,\n      220,\n      80,\n      180\n    ],\n    [\n      80,\n      150,\n      60,\n      130\n    ],\n    [\n      130,\n      230,\n      110,\n      190\n    ],\n    [\n      90,\n      180,\n      70,\n      160\n    ]\n  ]\n}";
+const titleStyle = {
+  chartBoxShadow: "9",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#FFBD01",
+  chartTextColor: "#36B389",
+  chartTextSize: "30",
+  chartTextWeight: "Bold"
+}
 
-const data = JSON.stringify(defaultDataSource);
-const echartsOption = JSON.stringify(defaultEchartsJsonOption);
+const lineStyle = {
+  chartBoxShadow: "5",
+  chartShadowColor: "#020101",
+  chartBorderColor: "#222222",
+  chartBorderWidth: "3",
+}
+
+const detailStyle = {
+  chartBoxShadow: "5",
+  chartFontFamily: "serif",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#FFD701",
+  chartTextColor: "#7A7A7B",
+  chartTextSize: "20",
+  chartTextWeight: "bold"
+}
 
 export default function SankeyChartExample() {
-  const blackListConfig: string[] = ["data", "echartsOption", "series"];
-  const series = [
-    {
-        "columnName": "spending",
-        "seriesName": "Spending",
-        "dataIndex": "f011b34c"
-    },
-    {
-        "columnName": "budget",
-        "seriesName": "Budget",
-        "dataIndex": "30e02269"
-    }
-];
   return (
     <>
       <ExampleGroup
@@ -37,11 +52,222 @@ export default function SankeyChartExample() {
           title={trans("componentDoc.default")}
           width={500}
           height={300}
-          blackListConfig={blackListConfig}
           config={{
-            mode: "json",
-            data: data,
-            series: series,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Alignment & Layout"
+        description="The Following Examples Show the different alignment option on the Sankey Chart Component."
+      >
+        <Example
+          title="Title Position - Left"
+          width={500}
+          height={350}
+          config={{
+            echartsTitleConfig : {
+            "position" : "left",
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Title Position - Center"
+          width={500}
+          height={350}
+          config={{
+              echartsTitleConfig : {
+                "position" : "center",
+              }
+            }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Title Position - Right"
+          width={500}
+          height={350}
+          config={{
+            echartsTitleConfig : {
+              "position" : "right",
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Title Position - Bottom"
+          width={500}
+          height={350}
+          config={{
+            echartsTitleVerticalConfig: {
+              position: "bottom",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Chart Position - Top & Left"
+          width={500}
+          height={350}
+          config={{
+            top: "0",
+            left: "0",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Chart Position - Bottom & Right"
+          width={500}
+          height={350}
+          config={{
+            bottom: "0",
+            right: "0",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Sankey Chart's Curveness - 0.2"
+          width={500}
+          height={350}
+          config={{
+            curveness: "0.2",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Sankey Chart's Curveness - 0.8"
+          width={500}
+          height={350}
+          config={{
+            curveness: "0.8",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Sankey Chart's Opacity - 0.3"
+          width={500}
+          height={350}
+          config={{
+            opacity: "0.1",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Sankey Chart's Opacity - 0.8"
+          width={500}
+          height={350}
+          config={{
+            opacity: "0.8",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Node Width - 3"
+          width={500}
+          height={350}
+          config={{
+            nodeWidth: "3",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Node Width - 30"
+          width={500}
+          height={350}
+          config={{
+            nodeWidth: "30",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Node Gap - 10"
+          width={500}
+          height={350}
+          config={{
+            nodeGap: "10",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Node Gap - 70"
+          width={500}
+          height={350}
+          config={{
+            nodeGap: "70",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Draggable - Set Node to draggable"
+          width={500}
+          height={350}
+          config={{
+            draggable: true,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Draggable - Set Node to non-draggable"
+          width={500}
+          height={350}
+          config={{
+            draggable: false,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Hiding the Tooltip"
+          width={500}
+          height={350}
+          config={{
+            tooltip: false,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the Styling Properties on the Sankey 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="Line Styling - Border & Box Shadow"
+          width={500}
+          height={350}
+          hideSettings={true}
+          config={{
+            lineStyle: lineStyle,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Details Styling - Text, Fonts & Box Shadow"
+          width={500}
+          height={350}
+          hideSettings={true}
+          config={{
+            detailStyle: detailStyle,
           }}
           compFactory={ChartCompWithDefault}
         />
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SunburstChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SunburstChart.tsx
index c04aec9d4..468d1ca02 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SunburstChart.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SunburstChart.tsx
@@ -6,29 +6,36 @@ import ExampleGroup from "../../common/ExampleGroup";
 
 const ChartCompWithDefault = uiCompRegistry["sunburstChart"].comp;
 
-const defaultDataSource = "[\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Administration\",\n    \"spending\": 9003,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Finance\",\n    \"spending\": 3033,\n    \"budget\": 4000\n  },\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Sales\",\n    \"spending\": 9230,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Administration\",\n    \"spending\": 13032,\n    \"budget\": 15000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Finance\",\n    \"spending\": 2300,\n    \"budget\": 5000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Sales\",\n    \"spending\": 7323.5,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Administration\",\n    \"spending\": 13000,\n    \"budget\": 16023\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Finance\",\n    \"spending\": 3569.5,\n    \"budget\": 3000\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Sales\",\n    \"spending\": 10000,\n    \"budget\": 9932\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Administration\",\n    \"spending\": 18033,\n    \"budget\": 20000\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Finance\",\n    \"spending\": 4890,\n    \"budget\": 4500\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Sales\",\n    \"spending\": 9322,\n    \"budget\": 8000\n  }\n]";
+const chartStyle= {
+  background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+  chartBorderColor: "#FDFAFA",
+  chartBorderStyle: "solid",
+  chartBorderWidth: "2",
+  chartBoxShadow: "200",
+  chartShadowColor: "#3377FF"
+}
 
-const defaultEchartsJsonOption = "{\n  \"xAxis\": {\n    \"data\": [\n      \"Day 1\",\n      \"Day 2\",\n      \"Day 3\",\n      \"Day 4\",\n      \"Day 5\"\n    ]\n  },\n  \"data\": [\n    [\n      100,\n      200,\n      50,\n      150\n    ],\n    [\n      120,\n      220,\n      80,\n      180\n    ],\n    [\n      80,\n      150,\n      60,\n      130\n    ],\n    [\n      130,\n      230,\n      110,\n      190\n    ],\n    [\n      90,\n      180,\n      70,\n      160\n    ]\n  ]\n}";
+const titleStyle = {
+  chartBoxShadow: "9",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#FFBD01",
+  chartTextColor: "#36B389",
+  chartTextSize: "30",
+  chartTextWeight: "Bold"
+}
 
-const data = JSON.stringify(defaultDataSource);
-const echartsOption = JSON.stringify(defaultEchartsJsonOption);
+const detailStyle = {
+  chartFontFamily: "serif",
+  chartFontStyle: "Italic",
+  chartTextColor: "#7A7A7B",
+  chartTextSize: "20",
+  chartTextWeight: "bold"
+}
 
 export default function SunburstChartExample() {
-  const blackListConfig: string[] = ["data", "echartsOption", "series"];
-  const series = [
-    {
-        "columnName": "spending",
-        "seriesName": "Spending",
-        "dataIndex": "f011b34c"
-    },
-    {
-        "columnName": "budget",
-        "seriesName": "Budget",
-        "dataIndex": "30e02269"
-    }
-];
   return (
     <>
+
       <ExampleGroup
         title={trans("componentDoc.basicUsage")}
         description={trans("componentDoc.basicDemoDescription")}
@@ -37,11 +44,165 @@ export default function SunburstChartExample() {
           title={trans("componentDoc.default")}
           width={500}
           height={300}
-          blackListConfig={blackListConfig}
           config={{
-            mode: "json",
-            data: data,
-            series: series,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Alignment & Layout"
+        description="The Following Examples Show the different alignment option on the Sunburst Chart Component."
+      >
+        <Example
+          title="Title Position - Left"
+          width={500}
+          height={350}
+          config={{
+            echartsTitleConfig : {
+            "position" : "left",
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Title Position - Center"
+          width={500}
+          height={350}
+          config={{
+              echartsTitleConfig : {
+                "position" : "center",
+              }
+            }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Title Position - Right"
+          width={500}
+          height={350}
+          config={{
+            echartsTitleConfig : {
+              "position" : "right",
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Title Position - Bottom"
+          width={500}
+          height={350}
+          config={{
+            echartsTitleVerticalConfig: {
+              position: "bottom",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Chart Position - Position_X : Extreme Left"
+          width={500}
+          height={350}
+          config={{
+            position_x: "25",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Chart Position - Position_X : Center"
+          width={500}
+          height={350}
+          config={{
+            position_x: "50",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Chart Position - Position_X : Extreme Right"
+          width={500}
+          height={350}
+          config={{
+            position_x: "75",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Inline Radius - 20"
+          width={500}
+          height={350}
+          config={{
+            radiusInline: "20",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Inline Radius - 50"
+          width={500}
+          height={350}
+          config={{
+            radiusInline: "50",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Outline Radius - 60"
+          width={500}
+          height={350}
+          config={{
+            radiusOutline: "40",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Outline Radius - 100"
+          width={500}
+          height={350}
+          config={{
+            radiusOutline: "100",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Hiding the Tooltip"
+          width={500}
+          height={350}
+          config={{
+            tooltip: false,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the Styling Properties on the Sunburst 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="Details Styling - Text, Fonts & Box Shadow"
+          width={500}
+          height={350}
+          hideSettings={true}
+          config={{
+            detailStyle: detailStyle,
           }}
           compFactory={ChartCompWithDefault}
         />
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/ThemeRiverChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/ThemeRiverChart.tsx
index b8dbe29d8..a32d2f479 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/ThemeRiverChart.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/ThemeRiverChart.tsx
@@ -6,27 +6,44 @@ import ExampleGroup from "../../common/ExampleGroup";
 
 const ChartCompWithDefault = uiCompRegistry["themeriverChart"].comp;
 
-const defaultDataSource = "[\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Administration\",\n    \"spending\": 9003,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Finance\",\n    \"spending\": 3033,\n    \"budget\": 4000\n  },\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Sales\",\n    \"spending\": 9230,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Administration\",\n    \"spending\": 13032,\n    \"budget\": 15000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Finance\",\n    \"spending\": 2300,\n    \"budget\": 5000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Sales\",\n    \"spending\": 7323.5,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Administration\",\n    \"spending\": 13000,\n    \"budget\": 16023\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Finance\",\n    \"spending\": 3569.5,\n    \"budget\": 3000\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Sales\",\n    \"spending\": 10000,\n    \"budget\": 9932\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Administration\",\n    \"spending\": 18033,\n    \"budget\": 20000\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Finance\",\n    \"spending\": 4890,\n    \"budget\": 4500\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Sales\",\n    \"spending\": 9322,\n    \"budget\": 8000\n  }\n]";
+const chartStyle= {
+  background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+  chartBorderColor: "#FDFAFA",
+  chartBorderStyle: "solid",
+  chartBorderWidth: "2",
+  chartBoxShadow: "200",
+  chartShadowColor: "#3377FF"
+}
 
-const defaultEchartsJsonOption = "{\n  \"xAxis\": {\n    \"data\": [\n      \"Day 1\",\n      \"Day 2\",\n      \"Day 3\",\n      \"Day 4\",\n      \"Day 5\"\n    ]\n  },\n  \"data\": [\n    [\n      100,\n      200,\n      50,\n      150\n    ],\n    [\n      120,\n      220,\n      80,\n      180\n    ],\n    [\n      80,\n      150,\n      60,\n      130\n    ],\n    [\n      130,\n      230,\n      110,\n      190\n    ],\n    [\n      90,\n      180,\n      70,\n      160\n    ]\n  ]\n}";
+const titleStyle = {
+  chartBoxShadow: "9",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#FFBD01",
+  chartTextColor: "#36B389",
+  chartTextSize: "30",
+  chartTextWeight: "Bold"
+}
 
-const data = JSON.stringify(defaultDataSource);
-const echartsOption = JSON.stringify(defaultEchartsJsonOption);
+const xAxisStyle = {
+  chartBoxShadow: "5",
+  chartFontFamily: "serif",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#020101",
+  chartTextColor: "#971827",
+  chartTextSize: "20",
+  chartTextWeight: "bold"
+}
+
+const legendStyle = {
+  chartBoxShadow: "9",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#FFBD01",
+  chartTextColor: "#36B389",
+  chartTextSize: "15",
+  chartTextWeight: "Bold"
+}
 
 export default function ThemeRiverChartExample() {
-  const blackListConfig: string[] = ["data", "echartsOption", "series"];
-  const series = [
-    {
-        "columnName": "spending",
-        "seriesName": "Spending",
-        "dataIndex": "f011b34c"
-    },
-    {
-        "columnName": "budget",
-        "seriesName": "Budget",
-        "dataIndex": "30e02269"
-    }
-];
   return (
     <>
       <ExampleGroup
@@ -37,15 +54,189 @@ export default function ThemeRiverChartExample() {
           title={trans("componentDoc.default")}
           width={500}
           height={300}
-          blackListConfig={blackListConfig}
           config={{
-            mode: "json",
-            data: data,
-            series: series,
           }}
           compFactory={ChartCompWithDefault}
         />
       </ExampleGroup>
+
+      <ExampleGroup
+        title="Alignment & Layout"
+        description="The Following Examples Show the different alignment option on the ThemeRiver Chart Component."
+      >
+        <Example
+          title="Title Position - Left"
+          width={500}
+          height={350}
+          config={{
+            echartsTitleConfig : {
+            "position" : "left",
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Title Position - Center"
+          width={500}
+          height={350}
+          config={{
+              echartsTitleConfig : {
+                "position" : "center",
+              }
+            }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Title Position - Right"
+          width={500}
+          height={350}
+          config={{
+            echartsTitleConfig : {
+              "position" : "right",
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Legend Position - Top"
+          width={500}
+          height={350}
+          config={{
+            echartsLegendConfig : {
+              "position" : "top",
+            },
+            echartsTitleConfig : {
+              "position" : "left",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Lagend Position - Bottom"
+          width={500}
+          height={350}
+          config={{
+            echartsLegendConfig : {
+              "position" : "bottom",
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Legend Orientation + Position - Vertical + Left"
+          width={500}
+          height={350}
+          config={{
+            echartsLegendOrientConfig: {
+              orient: "vertical"
+            },
+            echartsLegendAlignConfig: {
+              left: "left"
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Legend Orientation + Position - Horizontal + Center"
+          width={500}
+          height={350}
+          config={{
+            echartsLegendOrientConfig: {
+              orient: "horizontal"
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Legend Orientation + Position - Vertical + Right"
+          width={500}
+          height={350}
+          config={{
+            echartsLegendOrientConfig: {
+              orient: "vertical"
+            },
+            echartsLegendAlignConfig: {
+              left: "right"
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Hiding Legends"
+          width={500}
+          height={350}
+          config={{
+            legendVisibility: false,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Chart Position - Top & Left"
+          width={500}
+          height={350}
+          config={{
+            top: "-10",
+            left: "0",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Chart Position - Bottom & Right"
+          width={500}
+          height={350}
+          config={{
+            bottom: "0",
+            right: "0",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the Styling Properties on the HeatMap 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={{
+            axisStyle: xAxisStyle,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Legend Styling"
+          width={500}
+          height={350}
+          hideSettings={true}
+          config={{
+            legendStyle: legendStyle,
+          }}
+          compFactory={ChartCompWithDefault}
+        />        
+      </ExampleGroup>
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreeChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreeChart.tsx
index b0d10650f..602206f7c 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreeChart.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreeChart.tsx
@@ -6,46 +6,199 @@ import ExampleGroup from "../../common/ExampleGroup";
 
 const ChartCompWithDefault = uiCompRegistry["treeChart"].comp;
 
-const defaultDataSource = "[\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Administration\",\n    \"spending\": 9003,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Finance\",\n    \"spending\": 3033,\n    \"budget\": 4000\n  },\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Sales\",\n    \"spending\": 9230,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Administration\",\n    \"spending\": 13032,\n    \"budget\": 15000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Finance\",\n    \"spending\": 2300,\n    \"budget\": 5000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Sales\",\n    \"spending\": 7323.5,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Administration\",\n    \"spending\": 13000,\n    \"budget\": 16023\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Finance\",\n    \"spending\": 3569.5,\n    \"budget\": 3000\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Sales\",\n    \"spending\": 10000,\n    \"budget\": 9932\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Administration\",\n    \"spending\": 18033,\n    \"budget\": 20000\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Finance\",\n    \"spending\": 4890,\n    \"budget\": 4500\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Sales\",\n    \"spending\": 9322,\n    \"budget\": 8000\n  }\n]";
+const chartStyle= {
+  background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+  chartBorderColor: "#FDFAFA",
+  chartBorderStyle: "solid",
+  chartBorderWidth: "2",
+  chartBoxShadow: "200",
+  chartShadowColor: "#3377FF"
+}
 
-const defaultEchartsJsonOption = "{\n  \"xAxis\": {\n    \"data\": [\n      \"Day 1\",\n      \"Day 2\",\n      \"Day 3\",\n      \"Day 4\",\n      \"Day 5\"\n    ]\n  },\n  \"data\": [\n    [\n      100,\n      200,\n      50,\n      150\n    ],\n    [\n      120,\n      220,\n      80,\n      180\n    ],\n    [\n      80,\n      150,\n      60,\n      130\n    ],\n    [\n      130,\n      230,\n      110,\n      190\n    ],\n    [\n      90,\n      180,\n      70,\n      160\n    ]\n  ]\n}";
+const titleStyle = {
+  chartBoxShadow: "9",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#FFBD01",
+  chartTextColor: "#36B389",
+  chartTextSize: "30",
+  chartTextWeight: "Bold"
+}
 
-const data = JSON.stringify(defaultDataSource);
-const echartsOption = JSON.stringify(defaultEchartsJsonOption);
+const detailStyle = {
+  chartFontFamily: "serif",
+  chartFontStyle: "Italic",
+  chartTextColor: "#7A7A7B",
+  chartTextSize: "20",
+  chartTextWeight: "bold"
+}
 
 export default function TreeChartExample() {
-  const blackListConfig: string[] = ["data", "echartsOption", "series"];
-  const series = [
-    {
-        "columnName": "spending",
-        "seriesName": "Spending",
-        "dataIndex": "f011b34c"
-    },
-    {
-        "columnName": "budget",
-        "seriesName": "Budget",
-        "dataIndex": "30e02269"
-    }
-];
   return (
     <>
       <ExampleGroup
         title={trans("componentDoc.basicUsage")}
-        description={trans("componentDoc.basicDemoDescription")}
+        description="The Following Examples Show the Basic Usage of the Tree Chart Component."
       >
         <Example
           title={trans("componentDoc.default")}
           width={500}
           height={300}
-          blackListConfig={blackListConfig}
           config={{
-            mode: "json",
-            data: data,
-            series: series,
           }}
           compFactory={ChartCompWithDefault}
         />
       </ExampleGroup>
+
+      <ExampleGroup
+        title="Alignment & Layout"
+        description="The Following Examples Show the different alignment option on the Tree Chart Component."
+      >
+        <Example
+          title="Title Position - Left"
+          width={500}
+          height={350}
+          config={{
+            echartsTitleConfig : {
+            "position" : "left",
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Title Position - Center"
+          width={500}
+          height={350}
+          config={{
+              echartsTitleConfig : {
+                "position" : "center",
+              }
+            }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Title Position - Right"
+          width={500}
+          height={350}
+          config={{
+            echartsTitleConfig : {
+              "position" : "right",
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Title Position - Bottom"
+          width={500}
+          height={350}
+          config={{
+            echartsTitleVerticalConfig: {
+              position: "bottom",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Hiding Tooltip"
+          width={500}
+          height={350}
+          config={{
+            tooltip: false,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Chart Position - Top & Left"
+          width={500}
+          height={350}
+          config={{
+            top: "-15",
+            left: "0",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Chart Position - Bottom & Right"
+          width={500}
+          height={350}
+          config={{
+            bottom: "-15",
+            right: "0",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Point Size - 10"
+          width={500}
+          height={350}
+          config={{
+            pointSize: "10",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Point Size - 20"
+          width={500}
+          height={350}
+          config={{
+            pointSize: "20",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Line Width - 3"
+          width={500}
+          height={350}
+          config={{
+            lineWidth: "3",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Line Width - 6"
+          width={500}
+          height={350}
+          config={{
+            lineWidth: "6",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the Styling Properties on the Sunburst 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="Details Styling - Text, Fonts & Box Shadow"
+          width={500}
+          height={350}
+          hideSettings={true}
+          config={{
+            detailStyle: detailStyle,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup> 
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreemapChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreemapChart.tsx
index 35fdc1804..0971b5ef0 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreemapChart.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreemapChart.tsx
@@ -6,46 +6,164 @@ import ExampleGroup from "../../common/ExampleGroup";
 
 const ChartCompWithDefault = uiCompRegistry["treemapChart"].comp;
 
-const defaultDataSource = "[\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Administration\",\n    \"spending\": 9003,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Finance\",\n    \"spending\": 3033,\n    \"budget\": 4000\n  },\n  {\n    \"date\": \"2021-09\",\n    \"department\": \"Sales\",\n    \"spending\": 9230,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Administration\",\n    \"spending\": 13032,\n    \"budget\": 15000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Finance\",\n    \"spending\": 2300,\n    \"budget\": 5000\n  },\n  {\n    \"date\": \"2021-10\",\n    \"department\": \"Sales\",\n    \"spending\": 7323.5,\n    \"budget\": 8000\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Administration\",\n    \"spending\": 13000,\n    \"budget\": 16023\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Finance\",\n    \"spending\": 3569.5,\n    \"budget\": 3000\n  },\n  {\n    \"date\": \"2021-11\",\n    \"department\": \"Sales\",\n    \"spending\": 10000,\n    \"budget\": 9932\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Administration\",\n    \"spending\": 18033,\n    \"budget\": 20000\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Finance\",\n    \"spending\": 4890,\n    \"budget\": 4500\n  },\n  {\n    \"date\": \"2021-12\",\n    \"department\": \"Sales\",\n    \"spending\": 9322,\n    \"budget\": 8000\n  }\n]";
+const chartStyle= {
+  background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+  chartBorderColor: "#FDFAFA",
+  chartBorderStyle: "solid",
+  chartBorderWidth: "2",
+  chartBoxShadow: "200",
+  chartShadowColor: "#3377FF"
+}
 
-const defaultEchartsJsonOption = "{\n  \"xAxis\": {\n    \"data\": [\n      \"Day 1\",\n      \"Day 2\",\n      \"Day 3\",\n      \"Day 4\",\n      \"Day 5\"\n    ]\n  },\n  \"data\": [\n    [\n      100,\n      200,\n      50,\n      150\n    ],\n    [\n      120,\n      220,\n      80,\n      180\n    ],\n    [\n      80,\n      150,\n      60,\n      130\n    ],\n    [\n      130,\n      230,\n      110,\n      190\n    ],\n    [\n      90,\n      180,\n      70,\n      160\n    ]\n  ]\n}";
+const titleStyle = {
+  chartBoxShadow: "9",
+  chartFontStyle: "Italic",
+  chartShadowColor: "#FFBD01",
+  chartTextColor: "#36B389",
+  chartTextSize: "30",
+  chartTextWeight: "Bold"
+}
 
-const data = JSON.stringify(defaultDataSource);
-const echartsOption = JSON.stringify(defaultEchartsJsonOption);
+const detailStyle = {
+  chartFontFamily: "serif",
+  chartFontStyle: "Italic",
+  chartTextColor: "#fff",
+  chartTextSize: "20",
+  chartTextWeight: "bold"
+}
 
 export default function TreemapChartExample() {
-  const blackListConfig: string[] = ["data", "echartsOption", "series"];
-  const series = [
-    {
-        "columnName": "spending",
-        "seriesName": "Spending",
-        "dataIndex": "f011b34c"
-    },
-    {
-        "columnName": "budget",
-        "seriesName": "Budget",
-        "dataIndex": "30e02269"
-    }
-];
   return (
     <>
       <ExampleGroup
         title={trans("componentDoc.basicUsage")}
-        description={trans("componentDoc.basicDemoDescription")}
+        description="The Following Examples Show the Basic Usage of the Treemap Chart Component."
+
       >
         <Example
           title={trans("componentDoc.default")}
           width={500}
           height={300}
-          blackListConfig={blackListConfig}
           config={{
-            mode: "json",
-            data: data,
-            series: series,
           }}
           compFactory={ChartCompWithDefault}
         />
       </ExampleGroup>
+
+      <ExampleGroup
+        title="Alignment & Layout"
+        description="The Following Examples Show the different alignment option on the Tree Chart Component."
+      >
+        <Example
+          title="Title Position - Left"
+          width={500}
+          height={350}
+          config={{
+            echartsTitleConfig : {
+            "position" : "left",
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Title Position - Center"
+          width={500}
+          height={350}
+          config={{
+              echartsTitleConfig : {
+                "position" : "center",
+              }
+            }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Title Position - Right"
+          width={500}
+          height={350}
+          config={{
+            echartsTitleConfig : {
+              "position" : "right",
+            }
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Title Position - Bottom"
+          width={500}
+          height={350}
+          config={{
+            echartsTitleVerticalConfig: {
+              position: "bottom",
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Hiding Tooltip"
+          width={500}
+          height={350}
+          config={{
+            tooltip: false,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Chart Position - Top & Left"
+          width={500}
+          height={350}
+          config={{
+            top: "-15",
+            left: "0",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Chart Position - Bottom & Right"
+          width={500}
+          height={350}
+          config={{
+            bottom: "-15",
+            right: "0",
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the Styling Properties on the Sunburst 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="Details Styling - Text, Fonts & Box Shadow"
+          width={500}
+          height={350}
+          hideSettings={true}
+          config={{
+            detailStyle: detailStyle,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup> 
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/CollapsibleContainer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/CollapsibleContainer.tsx
new file mode 100644
index 000000000..f7fb4d23c
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/CollapsibleContainer.tsx
@@ -0,0 +1,441 @@
+import { ContainerComp } from "comps/comps/containerComp/containerComp";
+import { trans } from "i18n";
+import { chartColorPalette } from "lowcoder-design";
+import Example from "../../common/Example";
+import ExampleGroup from "../../common/ExampleGroup";
+
+const container = {
+    "header": {
+        "layout": {
+            "fedaa62": {
+                "i": "fedaa62",
+                "h": 5,
+                "w": 6,
+                "x": 0,
+                "y": 0
+            },
+            "5661db3a": {
+                "i": "5661db3a",
+                "h": 5,
+                "w": 10,
+                "x": 14,
+                "y": 0
+            }
+        },
+        "items": {
+            "fedaa62": {
+                "compType": "text",
+                "comp": {
+                    "text": "## Personal Details",
+                    "autoHeight": "auto",
+                    "type": "markdown",
+                    "horizontalAlignment": "left",
+                    "contentScrollBar": true,
+                    "verticalAlignment": "center",
+                    "style": {
+                        "background": "#F5F5F6",
+                        "margin": "3px",
+                        "padding": "3px",
+                        "text": "#222222",
+                        "textSize": "14px",
+                        "border": "#D7D9E0",
+                        "borderStyle": "solid",
+                        "radius": "4px",
+                        "borderWidth": "0",
+                        "lineHeight": "18px",
+                        "links": "#3377FF"
+                    },
+                    "margin": {
+                        "left": "",
+                        "right": "",
+                        "top": "",
+                        "bottom": ""
+                    },
+                    "padding": {
+                        "left": "",
+                        "right": "",
+                        "top": "",
+                        "bottom": ""
+                    },
+                    "preventStyleOverwriting": false,
+                    "appliedThemeId": "default-theme-id",
+                    "version": "latest"
+                },
+                "name": "text6"
+            },
+            "5661db3a": {
+                "compType": "toggleButton",
+                "comp": {
+                    "value": "true",
+                    "showText": false,
+                    "trueText": "Hide",
+                    "falseText": "Show",
+                    "trueIcon": "/icon:solid/AngleUp",
+                    "falseIcon": "/icon:solid/AngleDown",
+                    "iconPosition": "right",
+                    "alignment": "right",
+                    "style": {
+                        "background": "#F5F5F6",
+                        "margin": "3px",
+                        "padding": "3px",
+                        "text": "#222222",
+                        "textSize": "14px",
+                        "border": "#D7D9E0",
+                        "borderStyle": "solid",
+                        "radius": "4px",
+                        "borderWidth": "1px",
+                        "lineHeight": "18px"
+                    },
+                    "showBorder": false,
+                    "preventStyleOverwriting": false,
+                    "appliedThemeId": "default-theme-id",
+                    "version": "latest"
+                },
+                "name": "toggleButton3"
+            }
+        }
+    },
+    "body": {
+        "0": {
+            "view": {
+                "layout": {
+                    "c93dc520": {
+                        "i": "c93dc520",
+                        "h": 7,
+                        "w": 10,
+                        "x": 0,
+                        "y": 0,
+                        "pos": 0
+                    },
+                    "54dd6cc": {
+                        "i": "54dd6cc",
+                        "h": 10,
+                        "w": 10,
+                        "x": 14,
+                        "y": 0,
+                        "pos": 5
+                    },
+                    "aa36926a": {
+                        "i": "aa36926a",
+                        "h": 7,
+                        "w": 10,
+                        "x": 0,
+                        "y": 7,
+                        "pos": 1
+                    },
+                    "fc179ca5": {
+                        "i": "fc179ca5",
+                        "h": 7,
+                        "w": 10,
+                        "x": 14,
+                        "y": 14,
+                        "pos": 4
+                    },
+                    "99d1503e": {
+                        "i": "99d1503e",
+                        "h": 7,
+                        "w": 10,
+                        "x": 0,
+                        "y": 14,
+                        "pos": 6
+                    }
+                },
+                "items": {
+                    "c93dc520": {
+                        "compType": "input",
+                        "comp": {
+                            "defaultValue": "",
+                            "value": "",
+                            "label": {
+                                "text": "Full Name",
+                                "width": "33",
+                                "widthUnit": "%",
+                                "position": "row",
+                                "align": "left"
+                            },
+                            "placeholder": "Full name",
+                            "required": true,
+                            "validationType": "Text",
+                            "style": {
+                                "background": "#00000000",
+                                "border": "#D7D9E0",
+                                "margin": "3px",
+                                "padding": "3px",
+                                "borderStyle": "solid",
+                                "radius": "4px",
+                                "borderWidth": "0px",
+                                "opacity": "1"
+                            },
+                            "labelStyle": {
+                                "margin": "3px",
+                                "padding": "3px",
+                                "label": "#222222",
+                                "textSize": "14px",
+                                "border": "#D7D9E0",
+                                "borderStyle": "solid",
+                                "borderWidth": "0px",
+                                "accent": "#3377FF"
+                            },
+                            "prefixIcon": "/icon:solid/file-lines",
+                            "inputFieldStyle": {
+                                "margin": "3px",
+                                "padding": "3px",
+                                "text": "#222222",
+                                "textSize": "14px",
+                                "border": "#D7D9E0",
+                                "borderStyle": "solid",
+                                "radius": "4px",
+                                "borderWidth": "1px",
+                                "accent": "#3377FF"
+                            },
+                            "preventStyleOverwriting": false,
+                            "appliedThemeId": "default-theme-id",
+                            "version": "latest"
+                        },
+                        "name": "input1"
+                    },
+                    "aa36926a": {
+                        "compType": "input",
+                        "comp": {
+                            "defaultValue": "",
+                            "value": "",
+                            "label": {
+                                "text": "Email",
+                                "width": "33",
+                                "widthUnit": "%",
+                                "position": "row",
+                                "align": "left"
+                            },
+                            "placeholder": "Email Address",
+                            "required": true,
+                            "validationType": "Email",
+                            "style": {
+                                "background": "#00000000",
+                                "border": "#D7D9E0",
+                                "margin": "3px",
+                                "padding": "3px",
+                                "borderStyle": "solid",
+                                "radius": "4px",
+                                "borderWidth": "0px",
+                                "opacity": "1"
+                            },
+                            "labelStyle": {
+                                "margin": "3px",
+                                "padding": "3px",
+                                "label": "#222222",
+                                "textSize": "14px",
+                                "border": "#D7D9E0",
+                                "borderStyle": "solid",
+                                "borderWidth": "0px",
+                                "accent": "#3377FF"
+                            },
+                            "prefixIcon": "/icon:solid/inbox",
+                            "inputFieldStyle": {
+                                "margin": "3px",
+                                "padding": "3px",
+                                "text": "#222222",
+                                "textSize": "14px",
+                                "border": "#D7D9E0",
+                                "borderStyle": "solid",
+                                "radius": "4px",
+                                "borderWidth": "1px",
+                                "accent": "#3377FF"
+                            },
+                            "preventStyleOverwriting": false,
+                            "appliedThemeId": "default-theme-id",
+                            "version": "latest"
+                        },
+                        "name": "input2"
+                    },
+                    "54dd6cc": {
+                        "compType": "radio",
+                        "comp": {
+                            "defaultValue": "1",
+                            "value": "",
+                            "label": {
+                                "text": "Gender",
+                                "width": "33",
+                                "widthUnit": "%",
+                                "position": "row",
+                                "align": "left"
+                            },
+                            "options": {
+                                "optionType": "manual",
+                                "manual": {
+                                    "manual": [
+                                        {
+                                            "value": "1",
+                                            "label": "Male"
+                                        },
+                                        {
+                                            "value": "2",
+                                            "label": "Female"
+                                        }
+                                    ]
+                                },
+                                "mapData": {
+                                    "data": "[]"
+                                }
+                            },
+                            "style": {
+                                "background": "#00000000",
+                                "border": "#D7D9E0",
+                                "margin": "3px",
+                                "padding": "3px",
+                                "borderStyle": "solid",
+                                "radius": "4px",
+                                "borderWidth": "0px",
+                                "opacity": "1"
+                            },
+                            "labelStyle": {
+                                "margin": "3px",
+                                "padding": "3px",
+                                "label": "#222222",
+                                "textSize": "14px",
+                                "border": "#D7D9E0",
+                                "borderStyle": "solid",
+                                "borderWidth": "0px",
+                                "accent": "#3377FF"
+                            },
+                            "layout": "horizontal",
+                            "inputFieldStyle": {
+                                "margin": "3px",
+                                "padding": "3px",
+                                "staticText": "#222222",
+                                "textSize": "14px",
+                                "borderStyle": "solid",
+                                "borderWidth": "1px",
+                                "checkedBackground": "#3377FF",
+                                "uncheckedBorder": "#D7D9E0",
+                                "checkedBorder": "#3377FF"
+                            },
+                            "preventStyleOverwriting": false,
+                            "appliedThemeId": "default-theme-id",
+                            "version": "latest"
+                        },
+                        "name": "radio1"
+                    },
+                    "fc179ca5": {
+                        "compType": "date",
+                        "comp": {
+                            "defaultValue": "",
+                            "value": "",
+                            "userTimeZone": "Europe/Madrid",
+                            "label": {
+                                "text": "DOB",
+                                "width": "33",
+                                "widthUnit": "%",
+                                "position": "row",
+                                "align": "left"
+                            },
+                            "placeholder": "Select Date",
+                            "inputFormat": "YYYY-MM-DD",
+                            "style": {
+                                "background": "#00000000",
+                                "border": "#D7D9E0",
+                                "margin": "3px",
+                                "padding": "3px",
+                                "borderStyle": "solid",
+                                "radius": "4px",
+                                "borderWidth": "0px",
+                                "opacity": "1"
+                            },
+                            "labelStyle": {
+                                "margin": "3px",
+                                "padding": "3px",
+                                "label": "#222222",
+                                "textSize": "14px",
+                                "border": "#D7D9E0",
+                                "borderStyle": "solid",
+                                "borderWidth": "0px"
+                            },
+                            "suffixIcon": "/icon:regular/calendar",
+                            "minDate": "1960-01-01",
+                            "maxDate": "2010-12-31",
+                            "inputFieldStyle": {
+                                "border": "#D7D9E0",
+                                "radius": "4px",
+                                "text": "#222222",
+                                "margin": "3px",
+                                "padding": "3px",
+                                "borderStyle": "solid",
+                                "borderWidth": "1px",
+                                "accent": "#3377FF"
+                            },
+                            "timeZone": "Europe/Madrid",
+                            "preventStyleOverwriting": false,
+                            "appliedThemeId": "default-theme-id",
+                            "version": "latest"
+                        },
+                        "name": "date1"
+                    },
+                    "99d1503e": {
+                        "compType": "numberInput",
+                        "comp": {
+                            "defaultValue": "",
+                            "value": "",
+                            "placeholder": "+449827222541",
+                            "label": {
+                                "text": "Phone #",
+                                "width": "33",
+                                "widthUnit": "%",
+                                "position": "row",
+                                "align": "left"
+                            },
+                            "formatter": "standard",
+                            "step": "",
+                            "controls": false,
+                            "thousandsSeparator": false,
+                            "prefixText": "",
+                            "preventStyleOverwriting": false,
+                            "appliedThemeId": "default-theme-id",
+                            "version": "latest"
+                        },
+                        "name": "numberInput1"
+                    }
+                }
+            }
+        }
+    },
+    "footer": {
+        "layout": {}
+    },
+    "showHeader": true,
+    "showBody": true,
+    "autoHeight": "auto",
+    "showVerticalScrollbar": false,
+    "horizontalGridCells": 24,
+    "scrollbars": false,
+    "style": {
+        "border": "#D7D9E0",
+        "background": "#FFFFFF",
+        "radius": "4px",
+        "borderWidth": "1px",
+        "borderStyle": "solid",
+        "margin": "3px",
+        "padding": "3px"
+    },
+    "appliedThemeId": "default-theme-id"
+};
+
+export default function CollapsibleContainerExample() {
+  return (
+    <>
+      <ExampleGroup
+        title={trans("componentDoc.basicUsage")}
+        description="The Following Examples Show the Basic Usage of the Collapsiable Container Component."
+      >
+        <Example
+          title="Default Container"
+          hideSettings={true}
+          height={500}
+          width={1000}
+          config={{
+            container: container,
+          }}
+          compFactory={ContainerComp}
+        />
+      </ExampleGroup>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx
index e6a59383c..b86f4ce3b 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx
@@ -3,268 +3,235 @@ import Example from "../../common/Example";
 import ExampleGroup from "../../common/ExampleGroup";
 
 const columns={
-  "manual": [
-      {
-          "id": 0,
-          "label": "Column1",
-          "key": "Column1",
-          "minWidth": "",
-          "background": "",
-          "backgroundImage": "",
-          "border": "",
-          "radius": "",
-          "margin": "",
-          "padding": ""
-      },
-      {
-          "id": 1,
-          "label": "Column2",
-          "key": "Column2",
-          "minWidth": "",
-          "background": "",
-          "backgroundImage": "",
-          "border": "",
-          "radius": "",
-          "margin": "",
-          "padding": ""
-      },
-      {
-          "id": 2,
-          "label": "Add Column1",
-          "key": "Add Column1",
-          "minWidth": "",
-          "background": "",
-          "backgroundImage": "",
-          "border": "",
-          "radius": "",
-          "margin": "",
-          "padding": ""
-      },
-      {
-          "id": 3,
-          "label": "Add Column2",
-          "key": "Add Column2",
-          "minWidth": "",
-          "background": "",
-          "backgroundImage": "",
-          "border": "",
-          "radius": "",
-          "margin": "",
-          "padding": ""
-      },
-      {
-          "id": 4,
-          "label": "Add Column3",
-          "key": "Add Column3",
-          "minWidth": "",
-          "background": "",
-          "backgroundImage": "",
-          "border": "",
-          "radius": "",
-          "margin": "",
-          "padding": ""
-      },
-      {
-          "id": 5,
-          "label": "Add Column4",
-          "key": "Add Column4",
-          "minWidth": "",
-          "background": "",
-          "backgroundImage": "",
-          "border": "",
-          "radius": "",
-          "margin": "",
-          "padding": ""
-      }
-  ]
+    "manual": [
+        {
+            "id": 0,
+            "label": "Column1",
+            "key": "Column1",
+            "minWidth": "",
+            "background": "",
+            "backgroundImage": "",
+            "border": "",
+            "radius": "",
+            "margin": "",
+            "padding": ""
+        },
+        {
+            "id": 1,
+            "label": "Column2",
+            "key": "Column2",
+            "minWidth": "",
+            "background": "",
+            "backgroundImage": "",
+            "border": "",
+            "radius": "",
+            "margin": "",
+            "padding": ""
+        },
+        {
+            "id": 2,
+            "label": "Add Column1",
+            "key": "Add Column1",
+            "minWidth": "",
+            "background": "",
+            "backgroundImage": "",
+            "border": "",
+            "radius": "",
+            "margin": "",
+            "padding": ""
+        },
+        {
+            "id": 3,
+            "label": "Add Column2",
+            "key": "Add Column2",
+            "minWidth": "",
+            "background": "",
+            "backgroundImage": "",
+            "border": "",
+            "radius": "",
+            "margin": "",
+            "padding": ""
+        }
+    ]
 };
 
 const container={
     "0": {
         "layout": {
-            "d131aa12": {
-                "i": "d131aa12",
+            "164dcb77": {
+                "i": "164dcb77",
                 "h": 6,
-                "w": 17,
-                "x": 4,
-                "y": 5,
-                "pos": 1
+                "w": 14,
+                "x": 5,
+                "y": 4,
+                "pos": 0
             }
         },
         "items": {
-            "d131aa12": {
-                "compType": "progress",
+            "164dcb77": {
+                "compType": "text",
                 "comp": {
-                    "value": "60",
+                    "text": "### Row1, Column1",
+                    "autoHeight": "auto",
+                    "type": "markdown",
+                    "horizontalAlignment": "center",
+                    "contentScrollBar": true,
+                    "verticalAlignment": "center",
+                    "margin": {
+                        "left": "",
+                        "right": "",
+                        "top": "",
+                        "bottom": ""
+                    },
+                    "padding": {
+                        "left": "",
+                        "right": "",
+                        "top": "",
+                        "bottom": ""
+                    },
                     "preventStyleOverwriting": false,
                     "appliedThemeId": "",
                     "version": "latest"
                 },
-                "name": "progress1"
+                "name": "text1"
             }
         }
     },
     "1": {
         "layout": {
-            "e193cd76": {
-                "i": "e193cd76",
+            "6e4f0687": {
+                "i": "6e4f0687",
                 "h": 6,
-                "w": 24,
-                "x": 0,
-                "y": 5,
+                "w": 14,
+                "x": 5,
+                "y": 4,
                 "pos": 0
             }
         },
         "items": {
-            "e193cd76": {
-                "compType": "button",
+            "6e4f0687": {
+                "compType": "text",
                 "comp": {
-                    "text": "Button",
-                    "type": "",
-                    "form": "",
+                    "text": "### Row1, Column2",
+                    "autoHeight": "auto",
+                    "type": "markdown",
+                    "horizontalAlignment": "center",
+                    "contentScrollBar": true,
+                    "verticalAlignment": "center",
+                    "margin": {
+                        "left": "",
+                        "right": "",
+                        "top": "",
+                        "bottom": ""
+                    },
+                    "padding": {
+                        "left": "",
+                        "right": "",
+                        "top": "",
+                        "bottom": ""
+                    },
                     "preventStyleOverwriting": false,
                     "appliedThemeId": "",
                     "version": "latest"
                 },
-                "name": "button1"
+                "name": "text3"
             }
         }
     },
     "2": {
         "layout": {
-            "1d3eac41": {
-                "i": "1d3eac41",
-                "h": 7,
-                "w": 21,
-                "x": 1,
-                "y": 5,
+            "b47baba7": {
+                "i": "b47baba7",
+                "h": 6,
+                "w": 14,
+                "x": 5,
+                "y": 4,
                 "pos": 0
             }
         },
         "items": {
-            "1d3eac41": {
-                "compType": "switch",
+            "b47baba7": {
+                "compType": "text",
                 "comp": {
-                    "defaultValue": "",
-                    "value": "",
-                    "label": {
-                        "text": "Switch",
-                        "width": "33",
-                        "widthUnit": "%",
-                        "position": "row",
-                        "align": "left"
+                    "text": "### Row2, Column1",
+                    "autoHeight": "auto",
+                    "type": "markdown",
+                    "horizontalAlignment": "center",
+                    "contentScrollBar": true,
+                    "verticalAlignment": "center",
+                    "margin": {
+                        "left": "",
+                        "right": "",
+                        "top": "",
+                        "bottom": ""
+                    },
+                    "padding": {
+                        "left": "",
+                        "right": "",
+                        "top": "",
+                        "bottom": ""
                     },
                     "preventStyleOverwriting": false,
                     "appliedThemeId": "",
                     "version": "latest"
                 },
-                "name": "switch1"
+                "name": "text2"
             }
         }
     },
     "3": {
         "layout": {
-            "5853c1f5": {
-                "i": "5853c1f5",
-                "h": 20,
-                "w": 15,
-                "x": 5,
-                "y": 0,
-                "pos": 0
-            }
-        },
-        "items": {
-            "5853c1f5": {
-                "compType": "progressCircle",
-                "comp": {
-                    "value": "60",
-                    "preventStyleOverwriting": false,
-                    "appliedThemeId": "",
-                    "version": "latest"
-                },
-                "name": "progressCircle1"
-            }
-        }
-    },
-    "4": {
-        "layout": {
-            "68b3d00f": {
-                "i": "68b3d00f",
+            "ce02a8ee": {
+                "i": "ce02a8ee",
                 "h": 6,
-                "w": 23,
-                "x": 1,
-                "y": 7,
-                "pos": 0
-            }
-        },
-        "items": {
-            "68b3d00f": {
-                "compType": "button",
-                "comp": {
-                    "text": "Button",
-                    "type": "",
-                    "form": "",
-                    "preventStyleOverwriting": false,
-                    "appliedThemeId": "",
-                    "version": "latest"
-                },
-                "name": "button2"
-            }
-        }
-    },
-    "5": {
-        "layout": {
-            "307f8e6b": {
-                "i": "307f8e6b",
-                "h": 10,
-                "w": 24,
-                "x": 0,
-                "y": 6,
+                "w": 14,
+                "x": 5,
+                "y": 3,
                 "pos": 0
             }
         },
         "items": {
-            "307f8e6b": {
-                "compType": "checkbox",
+            "ce02a8ee": {
+                "compType": "text",
                 "comp": {
-                    "defaultValue": "",
-                    "value": "",
-                    "label": {
-                        "text": "Check box",
-                        "width": "33",
-                        "widthUnit": "%",
-                        "position": "row",
-                        "align": "left"
-                    },
-                    "options": {
-                        "optionType": "manual",
-                        "manual": {
-                            "manual": [
-                                {
-                                    "value": "1",
-                                    "label": "Option 1"
-                                },
-                                {
-                                    "value": "2",
-                                    "label": "Option 2"
-                                }
-                            ]
-                        },
-                        "mapData": {
-                            "data": "[]"
-                        }
+                    "text": "### Row2, Column2",
+                    "autoHeight": "auto",
+                    "type": "markdown",
+                    "horizontalAlignment": "center",
+                    "contentScrollBar": true,
+                    "verticalAlignment": "center",
+                    "margin": {
+                        "left": "",
+                        "right": "",
+                        "top": "",
+                        "bottom": ""
+                    },
+                    "padding": {
+                        "left": "",
+                        "right": "",
+                        "top": "",
+                        "bottom": ""
                     },
-                    "layout": "horizontal",
                     "preventStyleOverwriting": false,
                     "appliedThemeId": "",
                     "version": "latest"
                 },
-                "name": "checkbox1"
+                "name": "text4"
             }
         }
     }
 };
 
+const columnStyle = {
+    "background": "linear-gradient(45deg, #d53369 0%, #daae51 100%)",
+    "border": "#222222",
+    "padding": "0px"
+};
+
+const style= {
+    "background": "linear-gradient(135deg, #FFFFFF 0%, rgba(255, 255, 255, 1) 100%)"
+};
+
 export default function ColumnLayoutExample() {
     return (
       <>
@@ -275,20 +242,31 @@ export default function ColumnLayoutExample() {
           <Example
             title="Hiding the Component"
             hideSettings={true}
+            width={1000}
             config={{
               containers: container,
               columns: columns,
               hidden: true,
+              columnStyle: columnStyle,
+              style: style,
+              templateRows: "3fr 1fr",
+              templateColumns: "1fr 3fr",
             }}
             compFactory={ColumnLayoutComp}
           />
           <Example
             title="Disabling the Component"
             hideSettings={true}
+            width={1000}
             config={{
               containers: container,
               columns: columns, 
               disabled: true,
+              columnStyle: columnStyle,
+              style: style,
+              templateRows: "3fr 1fr",
+              templateColumns: "1fr 3fr",
+              matchColumnsHeight: true,
             }}
             compFactory={ColumnLayoutComp}
           />
@@ -299,48 +277,865 @@ export default function ColumnLayoutExample() {
           description="The Following Examples Show the Column Layout options on Column Layout Component."
         >
           <Example
-            title="Column Definition"
+            title="Column Definition - 3 Columns with different sizes"
             hideSettings={true}
+            width={1000}
             config={{
-              containers: container,
-              columns: columns,
+              containers: {
+                "0": {
+                    "layout": {
+                        "164dcb77": {
+                            "i": "164dcb77",
+                            "h": 6,
+                            "w": 14,
+                            "x": 5,
+                            "y": 4,
+                            "pos": 0
+                        }
+                    },
+                    "items": {
+                        "164dcb77": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "### Row1, Column1",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "center",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "",
+                                "version": "latest"
+                            },
+                            "name": "text1"
+                        }
+                    }
+                },
+                "1": {
+                    "layout": {
+                        "6e4f0687": {
+                            "i": "6e4f0687",
+                            "h": 6,
+                            "w": 14,
+                            "x": 5,
+                            "y": 4,
+                            "pos": 0
+                        }
+                    },
+                    "items": {
+                        "6e4f0687": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "### Row1, Column2",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "center",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "",
+                                "version": "latest"
+                            },
+                            "name": "text3"
+                        }
+                    }
+                },
+                "2": {
+                    "layout": {
+                        "b47baba7": {
+                            "i": "b47baba7",
+                            "h": 6,
+                            "w": 14,
+                            "x": 5,
+                            "y": 4,
+                            "pos": 0
+                        }
+                    },
+                    "items": {
+                        "b47baba7": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "### Row1, Column3",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "center",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "",
+                                "version": "latest"
+                            },
+                            "name": "text2"
+                        }
+                    }
+                },
+                "3": {
+                    "layout": {
+                        "ce02a8ee": {
+                            "i": "ce02a8ee",
+                            "h": 6,
+                            "w": 14,
+                            "x": 5,
+                            "y": 3,
+                            "pos": 0
+                        }
+                    },
+                    "items": {
+                        "ce02a8ee": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "### Row2, Column1",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "center",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "",
+                                "version": "latest"
+                            },
+                            "name": "text4"
+                        }
+                    }
+                },
+                "4": {
+                    "layout": {
+                        "7ff66f36": {
+                            "i": "7ff66f36",
+                            "h": 6,
+                            "w": 24,
+                            "x": 0,
+                            "y": 2,
+                            "pos": 0
+                        }
+                    },
+                    "items": {
+                        "7ff66f36": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "### Row2, Column2",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "center",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "",
+                                "version": "latest"
+                            },
+                            "name": "text5"
+                        }
+                    }
+                },
+                "5": {
+                    "layout": {
+                        "8e25033d": {
+                            "i": "8e25033d",
+                            "h": 6,
+                            "w": 14,
+                            "x": 5,
+                            "y": 2,
+                            "pos": 0
+                        }
+                    },
+                    "items": {
+                        "8e25033d": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "### Row2, Column3",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "center",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "",
+                                "version": "latest"
+                            },
+                            "name": "text6"
+                        }
+                    }
+                }
+            },
+              columns: {
+                "manual": [
+                    {
+                        "id": 0,
+                        "label": "Column1",
+                        "key": "Column1",
+                        "minWidth": "",
+                        "background": "",
+                        "backgroundImage": "",
+                        "border": "",
+                        "radius": "",
+                        "margin": "",
+                        "padding": ""
+                    },
+                    {
+                        "id": 1,
+                        "label": "Column2",
+                        "key": "Column2",
+                        "minWidth": "",
+                        "background": "",
+                        "backgroundImage": "",
+                        "border": "",
+                        "radius": "",
+                        "margin": "",
+                        "padding": ""
+                    },
+                    {
+                        "id": 2,
+                        "label": "Add Column1",
+                        "key": "Add Column1",
+                        "minWidth": "",
+                        "background": "",
+                        "backgroundImage": "",
+                        "border": "",
+                        "radius": "",
+                        "margin": "",
+                        "padding": ""
+                    },
+                    {
+                        "id": 3,
+                        "label": "Add Column2",
+                        "key": "Add Column2",
+                        "minWidth": "",
+                        "background": "",
+                        "backgroundImage": "",
+                        "border": "",
+                        "radius": "",
+                        "margin": "",
+                        "padding": ""
+                    },
+                    {
+                        "id": 4,
+                        "label": "Add Column3",
+                        "key": "Add Column3",
+                        "minWidth": "",
+                        "background": "",
+                        "backgroundImage": "",
+                        "border": "",
+                        "radius": "",
+                        "margin": "",
+                        "padding": ""
+                    },
+                    {
+                        "id": 5,
+                        "label": "Add Column4",
+                        "key": "Add Column4",
+                        "minWidth": "",
+                        "background": "",
+                        "backgroundImage": "",
+                        "border": "",
+                        "radius": "",
+                        "margin": "",
+                        "padding": ""
+                    }
+                ]
+            },
               templateColumns: "2fr 1fr 2fr",
-              templateRows: "1fr",
+              templateRows: "1fr 1fr",
+              columnStyle: columnStyle,
+              style: style,
+              matchColumnsHeight: true,
             }}
             compFactory={ColumnLayoutComp}
           />
           <Example
-            title="Row Definition"
+            title="Row Definition - 3 Rows with different sizes"
             hideSettings={true}
+            width={1000}
             config={{
-              containers: container,
-              columns: columns,
-              templateRows: "1fr 1fr 1fr",
-              templateColumns: "2fr 1fr 2fr",
+              containers: {
+                "0": {
+                    "layout": {
+                        "164dcb77": {
+                            "i": "164dcb77",
+                            "h": 8,
+                            "w": 19,
+                            "x": 3,
+                            "y": 4,
+                            "pos": 0
+                        }
+                    },
+                    "items": {
+                        "164dcb77": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "### Row1, Column1",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "center",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "",
+                                "version": "latest"
+                            },
+                            "name": "text1"
+                        }
+                    }
+                },
+                "1": {
+                    "layout": {
+                        "6e4f0687": {
+                            "i": "6e4f0687",
+                            "h": 6,
+                            "w": 24,
+                            "x": 0,
+                            "y": 5,
+                            "pos": 0
+                        }
+                    },
+                    "items": {
+                        "6e4f0687": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "### Row1, Column2",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "center",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "",
+                                "version": "latest"
+                            },
+                            "name": "text3"
+                        }
+                    }
+                },
+                "2": {
+                    "layout": {
+                        "b47baba7": {
+                            "i": "b47baba7",
+                            "h": 10,
+                            "w": 18,
+                            "x": 5,
+                            "y": 4,
+                            "pos": 0
+                        }
+                    },
+                    "items": {
+                        "b47baba7": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "### Row1, Column3",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "center",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "",
+                                "version": "latest"
+                            },
+                            "name": "text2"
+                        }
+                    }
+                },
+                "3": {
+                    "layout": {
+                        "ce02a8ee": {
+                            "i": "ce02a8ee",
+                            "h": 8,
+                            "w": 17,
+                            "x": 2,
+                            "y": 16,
+                            "pos": 0
+                        }
+                    },
+                    "items": {
+                        "ce02a8ee": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "### Row2, Column1",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "center",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "",
+                                "version": "latest"
+                            },
+                            "name": "text4"
+                        }
+                    }
+                },
+                "4": {
+                    "layout": {
+                        "7ff66f36": {
+                            "i": "7ff66f36",
+                            "h": 6,
+                            "w": 24,
+                            "x": 0,
+                            "y": 16,
+                            "pos": 0
+                        }
+                    },
+                    "items": {
+                        "7ff66f36": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "### Row2, Column2",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "center",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "",
+                                "version": "latest"
+                            },
+                            "name": "text5"
+                        }
+                    }
+                },
+                "5": {
+                    "layout": {
+                        "8e25033d": {
+                            "i": "8e25033d",
+                            "h": 8,
+                            "w": 19,
+                            "x": 3,
+                            "y": 16,
+                            "pos": 0
+                        }
+                    },
+                    "items": {
+                        "8e25033d": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "### Row2, Column3",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "center",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "",
+                                "version": "latest"
+                            },
+                            "name": "text6"
+                        }
+                    }
+                },
+                "6": {
+                    "layout": {
+                        "e92230c": {
+                            "i": "e92230c",
+                            "h": 8,
+                            "w": 19,
+                            "x": 2,
+                            "y": 3,
+                            "pos": 0
+                        }
+                    },
+                    "items": {
+                        "e92230c": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "### Row3, Column1",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "center",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "",
+                                "version": "latest"
+                            },
+                            "name": "text7"
+                        }
+                    }
+                },
+                "7": {
+                    "layout": {
+                        "5e09b262": {
+                            "i": "5e09b262",
+                            "h": 6,
+                            "w": 24,
+                            "x": 0,
+                            "y": 4,
+                            "pos": 0
+                        }
+                    },
+                    "items": {
+                        "5e09b262": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "### Row3, Column2",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "center",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "",
+                                "version": "latest"
+                            },
+                            "name": "text8"
+                        }
+                    }
+                },
+                "8": {
+                    "layout": {
+                        "1bc7c61f": {
+                            "i": "1bc7c61f",
+                            "h": 8,
+                            "w": 20,
+                            "x": 1,
+                            "y": 2,
+                            "pos": 0
+                        }
+                    },
+                    "items": {
+                        "1bc7c61f": {
+                            "compType": "text",
+                            "comp": {
+                                "text": "### Row3, Column3",
+                                "autoHeight": "auto",
+                                "type": "markdown",
+                                "horizontalAlignment": "center",
+                                "contentScrollBar": true,
+                                "verticalAlignment": "center",
+                                "margin": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "padding": {
+                                    "left": "",
+                                    "right": "",
+                                    "top": "",
+                                    "bottom": ""
+                                },
+                                "preventStyleOverwriting": false,
+                                "appliedThemeId": "",
+                                "version": "latest"
+                            },
+                            "name": "text9"
+                        }
+                    }
+                }
+            },
+              columns: {
+                "manual": [
+                    {
+                        "id": 0,
+                        "label": "Column1",
+                        "key": "Column1",
+                        "minWidth": "",
+                        "background": "",
+                        "backgroundImage": "",
+                        "border": "",
+                        "radius": "",
+                        "margin": "",
+                        "padding": ""
+                    },
+                    {
+                        "id": 1,
+                        "label": "Column2",
+                        "key": "Column2",
+                        "minWidth": "",
+                        "background": "",
+                        "backgroundImage": "",
+                        "border": "",
+                        "radius": "",
+                        "margin": "",
+                        "padding": ""
+                    },
+                    {
+                        "id": 2,
+                        "label": "Add Column1",
+                        "key": "Add Column1",
+                        "minWidth": "",
+                        "background": "",
+                        "backgroundImage": "",
+                        "border": "",
+                        "radius": "",
+                        "margin": "",
+                        "padding": ""
+                    },
+                    {
+                        "id": 3,
+                        "label": "Add Column2",
+                        "key": "Add Column2",
+                        "minWidth": "",
+                        "background": "",
+                        "backgroundImage": "",
+                        "border": "",
+                        "radius": "",
+                        "margin": "",
+                        "padding": ""
+                    },
+                    {
+                        "id": 4,
+                        "label": "Add Column3",
+                        "key": "Add Column3",
+                        "minWidth": "",
+                        "background": "",
+                        "backgroundImage": "",
+                        "border": "",
+                        "radius": "",
+                        "margin": "",
+                        "padding": ""
+                    },
+                    {
+                        "id": 5,
+                        "label": "Add Column4",
+                        "key": "Add Column4",
+                        "minWidth": "",
+                        "background": "",
+                        "backgroundImage": "",
+                        "border": "",
+                        "radius": "",
+                        "margin": "",
+                        "padding": ""
+                    },
+                    {
+                        "id": 6,
+                        "label": "Add Column5",
+                        "key": "Add Column5",
+                        "minWidth": "",
+                        "background": "",
+                        "backgroundImage": "",
+                        "border": "",
+                        "radius": "",
+                        "margin": "",
+                        "padding": ""
+                    },
+                    {
+                        "id": 7,
+                        "label": "Add Column6",
+                        "key": "Add Column6",
+                        "minWidth": "",
+                        "background": "",
+                        "backgroundImage": "",
+                        "border": "",
+                        "radius": "",
+                        "margin": "",
+                        "padding": ""
+                    },
+                    {
+                        "id": 8,
+                        "label": "Add Column7",
+                        "key": "Add Column7",
+                        "minWidth": "",
+                        "background": "",
+                        "backgroundImage": "",
+                        "border": "",
+                        "radius": "",
+                        "margin": "",
+                        "padding": ""
+                    }
+                ]
+            },
+              templateRows: "1fr 3fr 1fr",
+              templateColumns: "1fr 3fr 1fr",
+              columnStyle: columnStyle,
+              style: style,
+              matchColumnsHeight: true,
             }}
             compFactory={ColumnLayoutComp}
           />
           <Example
             title="Column Gap"
             hideSettings={true}
+            width={1000}
             config={{
               containers: container,
               columns: columns,
-              columnGap: "100px",
-              templateRows: "1fr",
-              templateColumns: "2fr 1fr 2fr",
+              columnGap: "200px",
+              templateRows: "3fr 1fr",
+              templateColumns: "1fr 3fr",
+              columnStyle: columnStyle,
+              style: style,
             }}
             compFactory={ColumnLayoutComp}
           />
            <Example
             title="Row Gap"
             hideSettings={true}
+            width={1000}
             config={{
               containers: container,
               columns: columns,
-              rowGap: "100px",
-              templateRows: "1fr 1fr",
-              templateColumns: "2fr 1fr 2fr",
+              rowGap: "200px",
+              templateRows: "3fr 1fr",
+              templateColumns: "1fr 3fr",
+              columnStyle: columnStyle,
+              style: style,
             }}
             compFactory={ColumnLayoutComp}
           />
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/FloatTextContainer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/FloatTextContainer.tsx
new file mode 100644
index 000000000..7a1578773
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/FloatTextContainer.tsx
@@ -0,0 +1,120 @@
+import { ContainerComp } from "comps/comps/containerComp/containerComp";
+import { trans } from "i18n";
+import { chartColorPalette } from "lowcoder-design";
+import Example from "../../common/Example";
+import ExampleGroup from "../../common/ExampleGroup";
+
+const container = {
+    "header": {
+        "layout": {
+            "f1e0a72f": {
+                "i": "f1e0a72f",
+                "h": 5,
+                "w": 24,
+                "x": 0,
+                "y": 0
+            }
+        },
+        "items": {
+            "f1e0a72f": {
+                "compType": "text",
+                "comp": {
+                    "text": "### Displayed Container Title",
+                    "autoHeight": "auto",
+                    "type": "markdown",
+                    "horizontalAlignment": "left",
+                    "contentScrollBar": true,
+                    "verticalAlignment": "center",
+                    "margin": {
+                        "left": "",
+                        "right": "",
+                        "top": "",
+                        "bottom": ""
+                    },
+                    "padding": {
+                        "left": "",
+                        "right": "",
+                        "top": "",
+                        "bottom": ""
+                    },
+                    "preventStyleOverwriting": false,
+                    "appliedThemeId": "",
+                    "version": "latest"
+                },
+                "name": "containerTitle1"
+            }
+        }
+    },
+    "body": {
+        "0": {
+            "view": {
+                "layout": {
+                    "e13e96e1": {
+                        "i": "e13e96e1",
+                        "h": 20,
+                        "w": 17,
+                        "x": 3,
+                        "y": 1,
+                        "pos": 0
+                    }
+                },
+                "items": {
+                    "e13e96e1": {
+                        "compType": "image",
+                        "comp": {
+                            "src": "https://temp.im/350x400",
+                            "autoHeight": "fixed",
+                            "restrictPaddingOnRotation": "image",
+                            "preventStyleOverwriting": false,
+                            "appliedThemeId": "",
+                            "version": "latest"
+                        },
+                        "name": "image1"
+                    }
+                }
+            }
+        }
+    },
+    "footer": {
+        "layout": {}
+    },
+    "showHeader": true,
+    "showBody": true,
+    "showFooter": true,
+    "autoHeight": "auto",
+    "showVerticalScrollbar": false,
+    "horizontalGridCells": 24,
+    "scrollbars": false,
+    "style": {
+        "borderWidth": "1px"
+    },
+    "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.";
+
+export default function FloatTextContainerExample() {
+  return (
+    <>
+      <ExampleGroup
+        title={trans("componentDoc.basicUsage")}
+        description="The Following Examples Show the Basic Usage of the Collapsiable Container Component."
+      >
+        <Example
+          title="Default Container"
+          hideSettings={true}
+          height={500}
+          width={1000}
+          config={{
+            container: container,
+            text: text,
+            float: "left",
+            horizontalAlignment: "justify",
+            width: "60",
+          }}
+          compFactory={ContainerComp}
+        />
+      </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 926c916df..23152d129 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ResponsiveLayout.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ResponsiveLayout.tsx
@@ -2,6 +2,341 @@ import { ResponsiveLayoutComp } from "comps/comps/responsiveLayout/responsiveLay
 import Example from "../../common/Example";
 import ExampleGroup from "../../common/ExampleGroup";
 
+const container= {
+  "0": {
+      "layout": {
+          "2c8159fd": {
+              "i": "2c8159fd",
+              "h": 23,
+              "w": 24,
+              "x": 0,
+              "y": 0,
+              "pos": 0
+          }
+      },
+      "items": {
+          "2c8159fd": {
+              "compType": "text",
+              "comp": {
+                  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula quis justo et ornare.",
+                  "autoHeight": "auto",
+                  "type": "markdown",
+                  "horizontalAlignment": "left",
+                  "contentScrollBar": true,
+                  "verticalAlignment": "center",
+                  "margin": {
+                      "left": "",
+                      "right": "",
+                      "top": "",
+                      "bottom": ""
+                  },
+                  "padding": {
+                      "left": "",
+                      "right": "",
+                      "top": "",
+                      "bottom": ""
+                  },
+                  "preventStyleOverwriting": false,
+                  "appliedThemeId": "",
+                  "version": "latest"
+              },
+              "name": "text1"
+          }
+      }
+  },
+  "1": {
+      "layout": {
+          "6b3372d7": {
+              "i": "6b3372d7",
+              "h": 26,
+              "w": 24,
+              "x": 0,
+              "y": 0,
+              "pos": 0
+          }
+      },
+      "items": {
+          "6b3372d7": {
+              "compType": "text",
+              "comp": {
+                  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula quis justo et ornare. Pellentesque aliquet libero id scelerisque dapibus. Integer tristique risus a nisl facilisis, vel tincidunt risus venenatis. Ut ut sapien velit. Nunc hendrerit nisi non magna consectetur ullamcorper. ",
+                  "autoHeight": "auto",
+                  "type": "markdown",
+                  "horizontalAlignment": "left",
+                  "contentScrollBar": true,
+                  "verticalAlignment": "center",
+                  "margin": {
+                      "left": "",
+                      "right": "",
+                      "top": "",
+                      "bottom": ""
+                  },
+                  "padding": {
+                      "left": "",
+                      "right": "",
+                      "top": "",
+                      "bottom": ""
+                  },
+                  "preventStyleOverwriting": false,
+                  "appliedThemeId": "",
+                  "version": "latest"
+              },
+              "name": "text4"
+          }
+      }
+  },
+  "2": {
+      "layout": {
+          "fb172507": {
+              "i": "fb172507",
+              "h": 30,
+              "w": 24,
+              "x": 0,
+              "y": 0,
+              "pos": 0
+          }
+      },
+      "items": {
+          "fb172507": {
+              "compType": "text",
+              "comp": {
+                  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula quis justo et ornare.",
+                  "autoHeight": "auto",
+                  "type": "markdown",
+                  "horizontalAlignment": "left",
+                  "contentScrollBar": true,
+                  "verticalAlignment": "center",
+                  "margin": {
+                      "left": "",
+                      "right": "",
+                      "top": "",
+                      "bottom": ""
+                  },
+                  "padding": {
+                      "left": "",
+                      "right": "",
+                      "top": "",
+                      "bottom": ""
+                  },
+                  "preventStyleOverwriting": false,
+                  "appliedThemeId": "",
+                  "version": "latest"
+              },
+              "name": "text2"
+          }
+      }
+  },
+  "3": {
+      "layout": {
+          "b66b7903": {
+              "i": "b66b7903",
+              "h": 33,
+              "w": 24,
+              "x": 0,
+              "y": 0,
+              "pos": 0
+          }
+      },
+      "items": {
+          "b66b7903": {
+              "compType": "text",
+              "comp": {
+                  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula quis justo et ornare. Pellentesque aliquet libero id scelerisque dapibus. Integer tristique risus a nisl facilisis, vel tincidunt risus venenatis. Ut ut sapien velit. Nunc hendrerit nisi non magna consectetur ullamcorper. ",
+                  "autoHeight": "auto",
+                  "type": "markdown",
+                  "horizontalAlignment": "left",
+                  "contentScrollBar": true,
+                  "verticalAlignment": "center",
+                  "margin": {
+                      "left": "",
+                      "right": "",
+                      "top": "",
+                      "bottom": ""
+                  },
+                  "padding": {
+                      "left": "",
+                      "right": "",
+                      "top": "",
+                      "bottom": ""
+                  },
+                  "preventStyleOverwriting": false,
+                  "appliedThemeId": "",
+                  "version": "latest"
+              },
+              "name": "text5"
+          }
+      }
+  },
+  "4": {
+      "layout": {
+          "43127fff": {
+              "i": "43127fff",
+              "h": 26,
+              "w": 24,
+              "x": 0,
+              "y": 2,
+              "pos": 0
+          }
+      },
+      "items": {
+          "43127fff": {
+              "compType": "text",
+              "comp": {
+                  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula quis justo et ornare.",
+                  "autoHeight": "auto",
+                  "type": "markdown",
+                  "horizontalAlignment": "left",
+                  "contentScrollBar": true,
+                  "verticalAlignment": "center",
+                  "margin": {
+                      "left": "",
+                      "right": "",
+                      "top": "",
+                      "bottom": ""
+                  },
+                  "padding": {
+                      "left": "",
+                      "right": "",
+                      "top": "",
+                      "bottom": ""
+                  },
+                  "preventStyleOverwriting": false,
+                  "appliedThemeId": "",
+                  "version": "latest"
+              },
+              "name": "text3"
+          }
+      }
+  },
+  "5": {
+      "layout": {
+          "8274cd26": {
+              "i": "8274cd26",
+              "h": 33,
+              "w": 24,
+              "x": 0,
+              "y": 0,
+              "pos": 0
+          }
+      },
+      "items": {
+          "8274cd26": {
+              "compType": "text",
+              "comp": {
+                  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula quis justo et ornare. Pellentesque aliquet libero id scelerisque dapibus. Integer tristique risus a nisl facilisis, vel tincidunt risus venenatis. Ut ut sapien velit. Nunc hendrerit nisi non magna consectetur ullamcorper. ",
+                  "autoHeight": "auto",
+                  "type": "markdown",
+                  "horizontalAlignment": "left",
+                  "contentScrollBar": true,
+                  "verticalAlignment": "center",
+                  "margin": {
+                      "left": "",
+                      "right": "",
+                      "top": "",
+                      "bottom": ""
+                  },
+                  "padding": {
+                      "left": "",
+                      "right": "",
+                      "top": "",
+                      "bottom": ""
+                  },
+                  "preventStyleOverwriting": false,
+                  "appliedThemeId": "",
+                  "version": "latest"
+              },
+              "name": "text6"
+          }
+      }
+  }
+};
+
+const column= {
+  "manual": [
+      {
+          "id": 0,
+          "label": "Column1",
+          "key": "Column1",
+          "minWidth": "",
+          "background": "",
+          "backgroundImage": "",
+          "border": "",
+          "radius": "",
+          "margin": "",
+          "padding": ""
+      },
+      {
+          "id": 1,
+          "label": "Column2",
+          "key": "Column2",
+          "minWidth": "",
+          "background": "",
+          "backgroundImage": "",
+          "border": "",
+          "radius": "",
+          "margin": "",
+          "padding": ""
+      },
+      {
+          "id": 2,
+          "label": "Column3",
+          "key": "Column3",
+          "minWidth": "",
+          "background": "",
+          "backgroundImage": "",
+          "border": "",
+          "radius": "",
+          "margin": "",
+          "padding": ""
+      },
+      {
+          "id": 3,
+          "label": "Column4",
+          "key": "Column4",
+          "minWidth": "",
+          "background": "",
+          "backgroundImage": "",
+          "border": "",
+          "radius": "",
+          "margin": "",
+          "padding": ""
+      },
+      {
+          "id": 4,
+          "label": "Column5",
+          "key": "Column5",
+          "minWidth": "",
+          "background": "",
+          "backgroundImage": "",
+          "border": "",
+          "radius": "",
+          "margin": "",
+          "padding": ""
+      },
+      {
+          "id": 5,
+          "label": "Column6",
+          "key": "Column6",
+          "minWidth": "",
+          "background": "",
+          "backgroundImage": "",
+          "border": "",
+          "radius": "",
+          "margin": "",
+          "padding": ""
+      }
+  ]
+};
+
+const columnStyle= {
+    "background": "linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 100%)",
+    "border": "#222222"
+};
+
+const style= {
+    "background": "linear-gradient(45deg, #d53369 0%, #daae51 100%)"
+};
+
 export default function ResponsiveLayoutExample() {
     return (
       <>
@@ -11,15 +346,29 @@ export default function ResponsiveLayoutExample() {
         >
           <Example
             title="Hiding the Component"
+            hideSettings={true}
+            width={1000}
             config={{ 
                 hidden: true,
+                containers: container,
+                columns: column,
+                columnStyle: columnStyle,
+                style: style,
+                rowBreak: true,
             }}
             compFactory={ResponsiveLayoutComp}
           />
           <Example
             title="Disabling the Component"
+            hideSettings={true}
+            width={1000}
             config={{ 
                 disabled: true,
+                containers: container,
+                columns: column,
+                columnStyle: columnStyle,
+                style: style,
+                rowBreak: true,
             }}
             compFactory={ResponsiveLayoutComp}
           />
@@ -30,16 +379,43 @@ export default function ResponsiveLayoutExample() {
           description="The Following Examples Show the Layout options on Component."
         >
           <Example
-            title="Hiding the Component"
+            title="Column Height - Matching"
+            hideSettings={true}
+            width={1000}
+            config={{
+                containers: container,
+                columns: column,
+                columnStyle: columnStyle,
+                style: style,
+                rowBreak: true,
+            }}
+            compFactory={ResponsiveLayoutComp}
+          />
+          <Example
+            title="Column Height - Non-Matching"
+            hideSettings={true}
+            width={1000}
             config={{ 
-                hidden: true,
+                matchColumnsHeight: false,
+                containers: container,
+                columns: column,
+                columnStyle: columnStyle,
+                style: style,
+                rowBreak: true,
             }}
             compFactory={ResponsiveLayoutComp}
           />
           <Example
-            title="Disabling the Component"
+            title="Responsiveness Effect - Responsive Layout adjust itself as per the screen size. Here, 4 columns will be shown per Row on Desktop view, 2 columns on Tablet iew and 1 column on Mobile view. You can change the screen size to see the effect "
+            hideSettings={true}
+            width={1000}
             config={{ 
-                disabled: true,
+                matchColumnsHeight: false,
+                containers: container,
+                columns: column,
+                columnStyle: columnStyle,
+                style: style,
+                rowBreak: true,
             }}
             compFactory={ResponsiveLayoutComp}
           />
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/SplitLayout.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/SplitLayout.tsx
new file mode 100644
index 000000000..84cade537
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/SplitLayout.tsx
@@ -0,0 +1,214 @@
+import { SplitLayoutComp } from "comps/comps/splitLayout/splitLayout";
+import Example from "../../common/Example";
+import ExampleGroup from "../../common/ExampleGroup";
+
+const columns= {
+    "manual": [
+        {
+            "id": 0,
+            "label": "Area 1",
+            "key": "Area1",
+            "minWidth": "10%",
+            "maxWidth": "90%",
+            "width": "50%",
+            "collapsible": false,
+            "background": "",
+            "backgroundImage": "",
+            "padding": ""
+        },
+        {
+            "id": 1,
+            "label": "Area 2",
+            "key": "Area2",
+            "minWidth": "10%",
+            "maxWidth": "90%",
+            "width": "50%",
+            "collapsible": true,
+            "background": "",
+            "backgroundImage": "",
+            "padding": ""
+        },
+        {
+            "id": 2,
+            "label": "Option 1",
+            "key": "Option 1",
+            "minWidth": "10%",
+            "maxWidth": "90%",
+            "width": "50%",
+            "collapsible": false,
+            "background": "",
+            "backgroundImage": "",
+            "padding": ""
+        }
+    ]
+};
+
+const bodyStyle= {
+    background: "#FFFFFF",
+    border: "#222222",
+};
+
+const columnStyle= {
+    background: "#FFFFFF",
+    border: "#222222",
+    margin: "10px",
+};
+
+export default function SplitLayoutExample() {
+    return (
+      <>
+        <ExampleGroup
+          title="Basic Usage"
+          description="The Following Examples Show the Basic Usage of the Split Layout Component."
+        >
+          <Example
+            title="Default Component"
+            hideSettings={true}
+            width={1000}
+            config={{
+                bodyStyle: bodyStyle,
+                columnStyle: columnStyle, 
+            }}
+            compFactory={SplitLayoutComp}
+          />
+          <Example
+            title="Multiple Split Layout containers ( Click on the icon at the center on right side ) "
+            hideSettings={true}
+            width={1000}
+            config={{
+                columns: columns,
+                bodyStyle: bodyStyle,
+                columnStyle: columnStyle, 
+            }}
+            compFactory={SplitLayoutComp}
+          />
+          <Example
+            title="Setting Minimum Width - 30%"
+            hideSettings={true}
+            width={1000}
+            config={{
+                columns: {
+                    "manual": [
+                        {
+                            "id": 0,
+                            "label": "Area 1",
+                            "key": "Area1",
+                            "minWidth": "30%",
+                            "maxWidth": "90%",
+                            "width": "50%",
+                            "collapsible": false,
+                            "background": "",
+                            "backgroundImage": "",
+                            "padding": ""
+                        },
+                        {
+                            "id": 1,
+                            "label": "Area 2",
+                            "key": "Area2",
+                            "minWidth": "30%",
+                            "maxWidth": "90%",
+                            "width": "50%",
+                            "collapsible": true,
+                            "background": "",
+                            "backgroundImage": "",
+                            "padding": ""
+                        },
+                        {
+                            "id": 2,
+                            "label": "Option 1",
+                            "key": "Option 1",
+                            "minWidth": "30%",
+                            "maxWidth": "90%",
+                            "width": "50%",
+                            "collapsible": false,
+                            "background": "",
+                            "backgroundImage": "",
+                            "padding": ""
+                        }
+                    ]
+                },
+                bodyStyle: bodyStyle,
+                columnStyle: columnStyle, 
+            }}
+            compFactory={SplitLayoutComp}
+          />
+          <Example
+            title="Setting Minimum Width - 10%"
+            hideSettings={true}
+            width={1000}
+            config={{
+                columns: columns,
+                bodyStyle: bodyStyle,
+                columnStyle: columnStyle, 
+            }}
+            compFactory={SplitLayoutComp}
+          />
+        </ExampleGroup>
+
+        <ExampleGroup
+          title="Layout"
+          description="The Following Examples Show the different layouts of the Split Layout Component."
+        >
+          <Example
+            title="Split Layout Orientation - Vertical"
+            hideSettings={true}
+            width={1000}
+            config={{
+                bodyStyle: bodyStyle,
+                columnStyle: columnStyle,
+                orientation: "vertical",
+            }}
+            compFactory={SplitLayoutComp}
+          />
+          <Example
+            title="Split Layout Orientation - Horizontal"
+            hideSettings={true}
+            width={1000}
+            config={{
+                bodyStyle: bodyStyle,
+                columnStyle: columnStyle,
+                orientation: "horizontal",
+            }}
+            compFactory={SplitLayoutComp}
+          />
+        </ExampleGroup>
+
+        <ExampleGroup
+          title="Styling Properties"
+          description="The Following Examples Show the different Styling properties on the Split Layout Component."
+        >
+          <Example
+            title="Body Styling - Background Color, Border, Padding"
+            hideSettings={true}
+            width={1000}
+            config={{
+                bodyStyle: {
+                    "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+                    "border": "#222222",
+                    "borderWidth": "2px",
+                    "padding": "10px",
+                },
+                columnStyle: columnStyle,
+            }}
+            compFactory={SplitLayoutComp}
+          />
+          <Example
+            title="Column Styling - Background Color, Border, Margin"
+            hideSettings={true}
+            width={1000}
+            config={{
+                bodyStyle: bodyStyle,
+                columnStyle: {
+                    "background": "linear-gradient(0deg, #f43b47 0%, #453a94 100%)",
+                    "border": "#222222",
+                    "borderWidth": "2px",
+                    "borderStyle": "solid",
+                    "margin": "10px",
+                },
+            }}
+            compFactory={SplitLayoutComp}
+          />
+        </ExampleGroup>
+      </>
+    );
+  }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx
index a32d10c91..e0725ab3c 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx
@@ -10,15 +10,72 @@ export default function BPMNEditorExample() {
   return (
     <>
       <ExampleGroup
-        title={trans("componentDoc.basicUsage")}
-        description={trans("componentDoc.basicDemoDescription")}
+        title="Basic Usage"
+        description="The Following Examples Show the Basic Usage of the BPMN Editor Component."
       >
         <Example
-          title={trans("componentDoc.default")}
+          title="Default Component"
+          height={400}
+          width={1000}
+          hideSettings={true}
           config={{
           }}
           compFactory={ChartCompWithDefault}
         />
+        <Example
+          title="Designer Mode"
+          height={400}
+          width={1000}
+          hideSettings={true}
+          config={{
+            designer: true,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Hiding the Logo"
+          height={400}
+          width={1000}
+          hideSettings={true}
+          config={{
+            showLogo: false,
+            designer: true,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Allowing to Download the Image"
+          height={400}
+          width={1000}
+          hideSettings={true}
+          config={{
+            designer: true,
+            svgDownload: true,
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the Styling properties of the BPMN Editor Component."
+      >
+        <Example
+          title="Body - Background Color, Border, Text Size and Margins"
+          height={400}
+          width={1000}
+          hideSettings={true}
+          config={{
+            designer: true,
+            styles: {
+              "margin": "10px",
+              "textSize": "30px",
+              "backgroundColor": "#D7D9E0",
+              "border": "#222222"
+            },
+          }}
+          compFactory={ChartCompWithDefault}
+        />
       </ExampleGroup>
     </>
   );
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx
index 9edbeb2ab..f6a05c68b 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx
@@ -8,14 +8,119 @@ export default function MentionCompExample() {
     <>
       <ExampleGroup
         title={trans("componentDoc.basicUsage")}
-        description={trans("componentDoc.basicDemoDescription")}
+        description="The Following Examples Show the Basic Usage of the Mention Component."
       >
         <Example
-          title={trans("componentDoc.value")}
+          title="Default Component"
           config={{
           }}
           compFactory={MentionComp}
         />
+        <Example
+          title="Placeholder Value"
+          config={{
+            placeholder: "Type @ to see the data",
+          }}
+          compFactory={MentionComp}
+        />
+        <Example
+          title="Default Value"
+          config={{
+            value: "John Doe",
+          }}
+          compFactory={MentionComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the Styling Properties of the Mention Component."
+      >
+        <Example
+          title="Label Name"
+          config={{
+            label: {
+              "text": "Mention Component",
+            },
+          }}
+          compFactory={MentionComp}
+        />
+        <Example
+          title="Label Tooltip"
+          config={{
+            label: {
+              "text": "Mention Component",
+              "tooltip": "This is a Mention Component"
+            },
+          }}
+          compFactory={MentionComp}
+        />
+        <Example
+          title="Label Position & Alignment - Left & Left"
+          config={{
+            label: {
+              "text": "Mention Component",
+              "position": "row",
+              "align": "left"
+            },
+          }}
+          compFactory={MentionComp}
+        />
+        <Example
+          title="Label Position & Alignment - Left & Right"
+          config={{
+            label: {
+              "text": "Mention Component",
+              "position": "row",
+              "align": "right"
+            },
+          }}
+          compFactory={MentionComp}
+        />
+        <Example
+          title="Label Position & Alignment - Top & Left"
+          config={{
+            label: {
+              "text": "Mention Component",
+              "position": "column",
+              "align": "left"
+            },
+          }}
+          compFactory={MentionComp}
+        />
+        <Example
+          title="Label Position & Alignment - Top & Right"
+          config={{
+            label: {
+              "text": "Mention Component",
+              "position": "column",
+              "align": "right"
+            },
+          }}
+          compFactory={MentionComp}
+        />
+        <Example
+          title="Label Width - 10%"
+          config={{
+            label: {
+              "text": "Mention Component",
+              "width": "10",
+              "widthUnit": "%",
+            },
+          }}
+          compFactory={MentionComp}
+        />
+        <Example
+          title="Label Width - 30%"
+          config={{
+            label: {
+              "text": "Mention Component",
+              "width": "47",
+              "widthUnit": "%",
+            },
+          }}
+          compFactory={MentionComp}
+        />
       </ExampleGroup>
     </>
   );
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Signature.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Signature.tsx
index f90c7ef5d..6b456c409 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Signature.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Signature.tsx
@@ -11,6 +11,8 @@ export default function SignatureExample() {
         >
             <Example
             title="Showing Hints/Placeholder Text"
+            height={300}
+            width={400}
             config={{ 
                 tips: "This is a Signature Component. Please, Sign here",
             }}
@@ -18,6 +20,8 @@ export default function SignatureExample() {
           />
           <Example
             title="Hiding the Signature Component"
+            height={300}
+            width={400}
             config={{ 
                 hidden: true,
             }}
@@ -25,6 +29,8 @@ export default function SignatureExample() {
           />
           <Example
             title="Show/Hide the Undo Icon"
+            height={300}
+            width={400}
             config={{ 
                 showUndo: false,
             }}
@@ -32,6 +38,8 @@ export default function SignatureExample() {
           />
           <Example
             title="Show/Hide the Clear Icon"
+            height={300}
+            width={400}
             config={{ 
                 showClear: false,
             }}
@@ -45,6 +53,8 @@ export default function SignatureExample() {
         >
           <Example
             title="Setting Label Text and ToolTip"
+            height={300}
+            width={400}
             config={{ 
                 label:{
                     text: "Sign Here",
@@ -55,6 +65,8 @@ export default function SignatureExample() {
           />
           <Example
             title="Setting Width of the Label"
+            height={300}
+            width={400}
             config={{                
                 label:{
                     text: "Sign Here",
@@ -65,6 +77,8 @@ export default function SignatureExample() {
           />
           <Example
             title="Label Position - TOP"
+            height={300}
+            width={400}
             config={{ 
                 label:{
                     text: "Sign Here",
@@ -75,6 +89,8 @@ export default function SignatureExample() {
           />
           <Example
             title="Label Alignment - RIGHT"
+            height={300}
+            width={400}
             config={{ 
                 label:{
                     text: "Sign Here",
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Transfer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Transfer.tsx
index 4b7564fac..4ca517ba9 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Transfer.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Transfer.tsx
@@ -2,15 +2,87 @@ import { transferComp } from "comps/comps/transferComp";
 import Example from "../../common/Example";
 import ExampleGroup from "../../common/ExampleGroup";
 
+const items = "[\n  {\n    \"key\": \"1\",\n    \"title\": \"Alice Jones\"\n    \"description\" : \"Business Owner\"\n  },\n  {\n    \"key\": \"2\",\n    \"title\": \"James Anderson\"\n  },\n  {\n    \"key\": \"3\",\n    \"title\": \"Philip Salt\"\n  },\n  {\n    \"key\": \"4\",\n    \"title\": \"Martinez\"\n  },\n  {\n    \"key\": \"5\",\n    \"title\": \"Chris Harris\"\n  },\n  {\n    \"key\": \"6\",\n    \"title\": \"John Smith\"\n  },\n  {\n    \"key\": \"7\",\n    \"title\": \"Christina\"\n  }\n]";
+
 export default function TransferExample() {
     return (
       <>
         <ExampleGroup
           title="Basic Usage"
+          description="The Following Examples Show the Basic Usage of the Transfer Component."
+        >
+          <Example
+            title="Default Transfer Component"
+            height={350}
+            width={700}
+            hideSettings={true}
+            config={{
+            }}
+            compFactory={TransferComp}
+          />
+          <Example
+            title="Transfer Component with Custom Data"
+            height={350}
+            width={700}
+            hideSettings={true}
+            config={{
+              items: items,
+              sourceTitle: "Top Priority Customers",
+              targetTitle: "Paid Customers",
+            }}
+            compFactory={TransferComp}
+          />
+        </ExampleGroup>
+
+        <ExampleGroup
+          title="Basic Usage"
+          description="The Following Examples Show the Basic Usage of the Transfer Component."
+        >
+          <Example
+            title="Default Transfer Component"
+            height={350}
+            width={700}
+            hideSettings={true}
+            config={{
+            }}
+            compFactory={TransferComp}
+          />
+          <Example
+            title="Transfer Component with Custom Data"
+            height={350}
+            width={700}
+            hideSettings={true}
+            config={{
+              items: items,
+              sourceTitle: "Top Priority Customers",
+              targetTitle: "Paid Customers",
+            }}
+            compFactory={TransferComp}
+          />
+        </ExampleGroup>
+
+        <ExampleGroup
+          title="Basic Usage"
+          description="The Following Examples Show the Basic Usage of the Transfer Component."
         >
           <Example
-            title="Default Audio Component"
-            config={{ 
+            title="Default Transfer Component"
+            height={350}
+            width={700}
+            hideSettings={true}
+            config={{
+            }}
+            compFactory={TransferComp}
+          />
+          <Example
+            title="Transfer Component with Custom Data"
+            height={350}
+            width={700}
+            hideSettings={true}
+            config={{
+              items: items,
+              sourceTitle: "Top Priority Customers",
+              targetTitle: "Paid Customers",
             }}
             compFactory={transferComp}
           />
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts b/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts
index 007750d93..ca2388e95 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts
@@ -94,6 +94,9 @@ import HillChartExample from "./ChartsComp/HillChart";
 import BPMNEditorExample from "./MediaComp/BPMNEditor";
 import ImageEditorExample from "./presentationComp/imageEditor";
 import DrawerExample from "./ChartsComp/Drawer";
+import CollapsibleContainerExample from "./ContainersComp/CollapsibleContainer";
+import FloatTextContainerExample from "./ContainersComp/FloatTextContainer";
+import SplitLayoutExample from "./ContainersComp/SplitLayout";
 
 const examples: { [key in UICompType]?: React.FunctionComponent } = {
   button: ButtonExample,
@@ -191,6 +194,9 @@ const examples: { [key in UICompType]?: React.FunctionComponent } = {
   bpmnEditor: BPMNEditorExample,
   imageEditor: ImageEditorExample,
   drawer: DrawerExample,
+  collapsibleContainer: CollapsibleContainerExample,
+  floatTextContainer: FloatTextContainerExample,
+  splitLayout: SplitLayoutExample,
 };
 
 export default examples;
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx
index a811f8412..40e21298b 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx
@@ -6,16 +6,154 @@ import ExampleGroup from "../../common/ExampleGroup";
 
 const ChartCompWithDefault = uiCompRegistry["kanban"].comp;
 
+const assigneeOptions = "[\n  {\n    \"id\": \"1\",\n    \"name\": \"Nancy Davloio\"\n  },\n  {\n    \"id\": \"2\",\n    \"name\": \"Andrew Fuller\"\n  },\n  {\n    \"id\": \"3\",\n    \"name\": \"James Wilson\"\n  },\n  {\n    \"id\": \"4\",\n    \"name\": \"George Linde\"\n  }\n]";
+
+const data = {
+  "optionType": "manual",
+  "manual": {
+      "manual": [
+          {
+              "label": "Task - 29001",
+              "status": "Open",
+              "summary": "Analyze customer requirements.",
+              "priority": "High",
+              "tags": "Bug, Release Bug",
+              "estimate": "0",
+              "assignee": "Nancy Davloio",
+              "rankId": "1",
+              "id": "0"
+          },
+          {
+              "label": "Task - 29002",
+              "status": "InProgress",
+              "summary": "Add responsive support to applicaton",
+              "priority": "Low",
+              "tags": "Story, Kanban",
+              "estimate": "0",
+              "assignee": "Nancy Davloio",
+              "rankId": "1",
+              "id": "1"
+          },
+          {
+              "label": "Task - 29003",
+              "status": "Open",
+              "summary": "Resolve Frontend issues",
+              "priority": "Medium",
+              "tags": "Frontend, UI/UX",
+              "estimate": "2",
+              "assignee": "Andrew Fuller",
+              "rankId": "1",
+              "id": "2"
+          },
+          {
+              "label": "Task - 29004",
+              "status": "Open",
+              "summary": "Setup Docker",
+              "priority": "1",
+              "tags": "Docker, Setup",
+              "estimate": "2",
+              "assignee": "James Wilson",
+              "rankId": "0",
+              "id": "3"
+          },
+          {
+              "label": "Task - 29005",
+              "status": "Open",
+              "summary": "Setup Staging Server",
+              "priority": "High",
+              "tags": "Testing, BE",
+              "estimate": "0",
+              "assignee": "George Linde",
+              "rankId": "0",
+              "id": "4"
+          },
+          {
+              "label": "Task - 29006",
+              "status": "InProgress",
+              "summary": "Implment Payment module",
+              "priority": "High",
+              "tags": "Subscription, BE",
+              "estimate": "2",
+              "assignee": "James Wilson",
+              "rankId": "0",
+              "id": "5"
+          },
+          {
+              "label": "Task - 29007",
+              "status": "InProgress",
+              "summary": "Setup Project Documentation",
+              "priority": "High",
+              "tags": "Docs, Requirements",
+              "estimate": "3",
+              "assignee": "George Linde",
+              "rankId": "0",
+              "id": "6"
+          },
+          {
+              "label": "Task - 29008",
+              "status": "Review",
+              "summary": "Setup MySQL DB",
+              "priority": "High",
+              "tags": "DB Setup",
+              "estimate": "0",
+              "assignee": "Andrew Fuller",
+              "rankId": "0",
+              "id": "7"
+          },
+          {
+              "label": "Task - 29009",
+              "status": "Review",
+              "summary": "Project Setup",
+              "priority": "High",
+              "tags": "Setup",
+              "estimate": "0",
+              "assignee": "James Wilson",
+              "rankId": "0",
+              "id": "8"
+          },
+          {
+              "label": "Task - 29010",
+              "status": "Close",
+              "summary": "Finalize Project Timelines",
+              "priority": "High",
+              "tags": "Setup, Timeline",
+              "estimate": "0",
+              "assignee": "Nancy Davloio",
+              "rankId": "0",
+              "id": "9"
+          }
+      ]
+  },
+  "mapData": {
+      "data": "[{\"label\":\"Task - 29001\",\"status\":\"Open\",\"summary\":\"Analyze customer requirements.\",\"type\":\"\",\"priority\":\"High\",\"tags\":\"Bug, Release Bug\",\"estimate\":0,\"assignee\":\"Nancy Davloio\",\"rankId\":1,\"id\":0},{\"label\":\"Task - 29002\",\"status\":\"InProgress\",\"summary\":\"Add responsive support to applicaton\",\"type\":\"\",\"priority\":\"Low\",\"tags\":\"Story, Kanban\",\"estimate\":0,\"assignee\":\"Nancy Davloio\",\"rankId\":1,\"id\":1},{\"label\":\"Option 1\",\"status\":\"Open\",\"summary\":\"\",\"type\":\"\",\"priority\":\"\",\"tags\":\"\",\"estimate\":0,\"assignee\":\"\",\"rankId\":0,\"id\":2},{\"label\":\"Option 2\",\"status\":\"Open\",\"summary\":\"\",\"type\":\"\",\"priority\":\"\",\"tags\":\"\",\"estimate\":0,\"assignee\":\"\",\"rankId\":0,\"id\":3},{\"label\":\"Option 3\",\"status\":\"Open\",\"summary\":\"\",\"type\":\"\",\"priority\":\"\",\"tags\":\"\",\"estimate\":0,\"assignee\":\"\",\"rankId\":0,\"id\":4},{\"label\":\"Option 4\",\"status\":\"InProgress\",\"summary\":\"\",\"type\":\"\",\"priority\":\"\",\"tags\":\"\",\"estimate\":0,\"assignee\":\"\",\"rankId\":0,\"id\":5},{\"label\":\"Option 5\",\"status\":\"InProgress\",\"summary\":\"\",\"type\":\"\",\"priority\":\"\",\"tags\":\"\",\"estimate\":0,\"assignee\":\"\",\"rankId\":0,\"id\":6},{\"label\":\"Option 6\",\"status\":\"Review\",\"summary\":\"\",\"type\":\"\",\"priority\":\"\",\"tags\":\"\",\"estimate\":0,\"assignee\":\"\",\"rankId\":0,\"id\":7},{\"label\":\"Option 7\",\"status\":\"Review\",\"summary\":\"\",\"type\":\"\",\"priority\":\"\",\"tags\":\"\",\"estimate\":0,\"assignee\":\"\",\"rankId\":0,\"id\":8},{\"label\":\"Option 8\",\"status\":\"Close\",\"summary\":\"\",\"type\":\"\",\"priority\":\"\",\"tags\":\"\",\"estimate\":0,\"assignee\":\"\",\"rankId\":0,\"id\":9}]",
+      "mapData": {
+          "status": "Open"
+      }
+  }
+};
+
 export default function KanbanExample() {
   return (
     <>
       <ExampleGroup
         title={trans("componentDoc.basicUsage")}
-        description={trans("componentDoc.basicDemoDescription")}
+        description="The Following Examples Show the Basic Usage of the Kanban Component."
       >
         <Example
-          title={trans("componentDoc.default")}
+          title="Default View"
+          hideSettings={true}
+          width={1000}
+          config={{
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+        <Example
+          title="Custom View"
+          hideSettings={true}
+          width={1000}
           config={{
+            data: data,
+            assigneeOptions: assigneeOptions,
           }}
           compFactory={ChartCompWithDefault}
         />
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/table.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/table.tsx
index 4a050d0a7..2c1c8167f 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/table.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/table.tsx
@@ -51,7 +51,7 @@ export default function TableExample() {
         />
       </ExampleGroup>
 
-      <ExampleGroup title={trans("componentDoc.style")}>
+      <ExampleGroup title="Layout">
         <Example
           title={trans("componentDoc.hideHeader")}
           width={400}
@@ -59,6 +59,13 @@ export default function TableExample() {
           blackListConfig={blackListConfig}
           compFactory={TableComp}
         />
+        <Example
+          title="Hide Footer"
+          width={400}
+          config={{ data: data, hideToolbar: true }}
+          blackListConfig={blackListConfig}
+          compFactory={TableComp}
+        />
         <Example
           title={trans("componentDoc.hideBordered")}
           width={400}
@@ -90,6 +97,30 @@ export default function TableExample() {
           blackListConfig={blackListConfig}
           compFactory={TableComp}
         />
+        <Example
+          title="Showing Loading bars"
+          width={400}
+          config={{ 
+            data: data, 
+            hideBordered: true,
+            loading: true, 
+            }}
+          blackListConfig={blackListConfig}
+          compFactory={TableComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup title="Editable Table & Edit modes">
+        <Example
+          title="Editable Table"
+          width={400}
+          config={{ 
+            data: data, 
+            hideHeader: true, 
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={TableComp}
+        />
       </ExampleGroup>
 
       <ExampleGroup title={trans("componentDoc.paginationSetting")}>
@@ -154,6 +185,46 @@ export default function TableExample() {
           blackListConfig={blackListConfig}
           compFactory={TableComp}
         />
+        <Example
+          title="Hiding Filter icon"
+          width={400}
+          config={{ 
+            data: data,
+            toolbar:{position:"below", showFilter:false, showDownload:true,showRefresh:true,columnSetting:true},
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={TableComp}
+        />
+        <Example
+          title="Hiding Download Icon"
+          width={400}
+          config={{ 
+            data: data,
+            toolbar:{position:"below", showFilter:true, showDownload:false,showRefresh:true,columnSetting:true},
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={TableComp}
+        />
+        <Example
+          title="Hiding Refresh Icon"
+          width={400}
+          config={{ 
+            data: data,
+            toolbar:{position:"below", showFilter:true, showDownload:true,showRefresh:false,columnSetting:true},
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={TableComp}
+        />
+        <Example
+          title="Hiding Column Visibility Icon"
+          width={400}
+          config={{ 
+            data: data,
+            toolbar:{position:"below", showFilter:true, showDownload:true,showRefresh:true,columnSetting:false},
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={TableComp}
+        />
       </ExampleGroup>
 
       <ExampleGroup title="Summary and Inline Rows">
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/File.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/File.tsx
index b383bffea..be97c5bdb 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/File.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/File.tsx
@@ -8,30 +8,35 @@ export default function FileExample() {
     <>
       <ExampleGroup
         title={trans("componentDoc.basicUsage")}
-        description={trans("componentDoc.basicDemoDescription")}
+        description="The Following Examples Show the Basic Usage of the File Component."
       >
         <Example
-          title={trans("componentDoc.default")}
+          title="Default File Upload component"
           config={{
-            disabled: false,
           }}
           compFactory={FileComp}
         />
         <Example
-          title={trans("componentDoc.disabled")}
+          title="Disabling the File Upload component"
           config={{
             disabled: true,
           }}
           compFactory={FileComp}
         />
+        <Example
+          title="Hiding the File Upload component"
+          config={{
+            hidden: true,
+          }}
+          compFactory={FileComp}
+        />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.option")}>
         <Example
           title={trans("componentDoc.singleFileUpload")}
           config={{
-            disabled: false,
             filetype: '[".png", ".pdf", ".word"]',
-            showUploadList: false,
             uploadType: "single",
           }}
           compFactory={FileComp}
@@ -39,7 +44,6 @@ export default function FileExample() {
         <Example
           title={trans("componentDoc.multiFileUpload")}
           config={{
-            disabled: false,
             filetype: '[".png", ".pdf", ".word"]',
             uploadType: "multiple",
           }}
@@ -48,16 +52,16 @@ export default function FileExample() {
         <Example
           title={trans("componentDoc.folderUpload")}
           config={{
-            disabled: false,
             filetype: '[".png", ".pdf", ".word"]',
             uploadType: "directory",
           }}
           compFactory={FileComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.validation")} description="">
         <Example
-          title={trans("componentDoc.singleFile")}
+          title="File Size"
           width={340}
           config={{
             minSize: "100KB",
@@ -66,7 +70,7 @@ export default function FileExample() {
           compFactory={FileComp}
         />
         <Example
-          title={trans("componentDoc.multiple")}
+          title="Maximum File number - 5"
           width={340}
           config={{
             maxFiles: "5",
@@ -76,7 +80,7 @@ export default function FileExample() {
           compFactory={FileComp}
         />
         <Example
-          title={trans("componentDoc.directory")}
+          title="Maximum File number - 10"
           width={340}
           config={{
             maxFiles: "10",
@@ -86,6 +90,55 @@ export default function FileExample() {
           compFactory={FileComp}
         />
       </ExampleGroup>
+
+      <ExampleGroup
+        title="Advanced Options"
+        description="The Following Examples Show the Advance Usage of the File Component."
+      >
+        <Example
+          title="File Upload Type - .png"
+          config={{
+            fileType: "[\".png\"]",
+          }}
+          compFactory={FileComp}
+        />
+        <Example
+          title="Multiple File Upload Type - .png"
+          config={{
+            fileType: "[\".png\",\".pdf\",\".word\"]",
+          }}
+          compFactory={FileComp}
+        />
+        <Example
+          title="Prefix and Postfix Icons"
+          config={{
+            prefixIcon: "/icon:solid/angles-up",
+            suffixIcon: "/icon:solid/angles-down",
+          }}
+          compFactory={FileComp}
+        />
+        <Example
+          title="Force Capture - Take a picture and Upload"
+          config={{
+            forceCapture: true,
+            text: "Capture & Upload",
+          }}
+          compFactory={FileComp}
+        />
+        <Example
+          title="Hide Upload List - Uploaded File won't be shown"
+          config={{
+            showUploadList: false,
+          }}
+          compFactory={FileComp}
+        />
+        <Example
+          title="Show Upload List - Uploaded File will be shown"
+          config={{
+          }}
+          compFactory={FileComp}
+        />
+      </ExampleGroup>
     </>
   );
 }