diff --git a/client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx
index e138185865..d915dc534c 100644
--- a/client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx
@@ -304,17 +304,17 @@ let BarChartComp = withExposingConfigs(BarChartTmpComp, [
 
 
 export const BarChartCompWithDefault = withDefault(BarChartComp, {
-  xAxisKey: "date",
+  xAxisKey: "month",
   series: [
     {
       dataIndex: genRandomKey(),
-      seriesName: trans("chart.spending"),
-      columnName: "spending",
+      seriesName: "Sales",
+      columnName: "sales",
     },
     {
       dataIndex: genRandomKey(),
-      seriesName: trans("chart.budget"),
-      columnName: "budget",
+      seriesName: "Target",
+      columnName: "target",
     },
   ],
 });
diff --git a/client/packages/lowcoder-comps/src/comps/barChartComp/barChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartConstants.tsx
index 668b569be3..98c4191844 100644
--- a/client/packages/lowcoder-comps/src/comps/barChartComp/barChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartConstants.tsx
@@ -37,6 +37,40 @@ import { FunnelChartConfig } from "../basicChartComp/chartConfigs/funnelChartCon
 import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
 import {EchartsTitleConfig} from "../basicChartComp/chartConfigs/echartsTitleConfig";
 
+// Enhanced default data for bar charts
+export const barChartDefaultData = [
+  {
+    month: "Jan",
+    sales: 1200,
+    target: 1000
+  },
+  {
+    month: "Feb",
+    sales: 1500,
+    target: 1200
+  },
+  {
+    month: "Mar",
+    sales: 1300,
+    target: 1400
+  },
+  {
+    month: "Apr",
+    sales: 1800,
+    target: 1500
+  },
+  {
+    month: "May",
+    sales: 1600,
+    target: 1700
+  },
+  {
+    month: "Jun",
+    sales: 2100,
+    target: 1900
+  }
+];
+
 export const ChartTypeOptions = [
   {
     label: trans("chart.bar"),
@@ -241,9 +275,9 @@ const EchartsOptionComp = withType(EchartsOptionMap, "funnel");
 export type CharOptionCompType = keyof typeof ChartOptionMap;
 
 export const chartUiModeChildren = {
-  title: withDefault(StringControl, trans("echarts.defaultTitle")),
-  data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource),
-  xAxisKey: valueComp<string>(""), // x-axis, key from data
+  title: withDefault(StringControl, trans("barChart.defaultTitle")),
+  data: jsonControl(toJSONObjectArray, barChartDefaultData),
+  xAxisKey: valueComp<string>("month"), // x-axis, key from data
   xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
   xAxisData: jsonControl(toArray, []),
   series: SeriesListComp,
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx
index ee11883352..dd7a369934 100644
--- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx
+++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx
@@ -33,10 +33,10 @@ const BarTypeOptions = [
 export const BarChartConfig = (function () {
   return new MultiCompBuilder(
     {
-      showLabel: BoolControl,
+      showLabel: withDefault(BoolControl, true),
       type: dropdownControl(BarTypeOptions, "basicBar"),
-      barWidth: withDefault(NumberControl, i18nObjs.defaultBarChartOption.barWidth),
-      showBackground: BoolControl,
+      barWidth: withDefault(NumberControl, 40),
+      showBackground: withDefault(BoolControl, false),
       backgroundColor: withDefault(ColorControl, i18nObjs.defaultBarChartOption.barBg),
       radiusAxisMax: NumberControl,
       polarRadiusStart: withDefault(StringControl, '30'),
diff --git a/client/packages/lowcoder-comps/src/comps/line3dChartComp/line3dChartUtils.ts b/client/packages/lowcoder-comps/src/comps/line3dChartComp/line3dChartUtils.ts
index d1be05edf3..3ba5858a18 100644
--- a/client/packages/lowcoder-comps/src/comps/line3dChartComp/line3dChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/line3dChartComp/line3dChartUtils.ts
@@ -178,7 +178,6 @@ export function getEchartsConfig(
       },
     }
   };
-  console.log(config);
   return config;
 }
 
diff --git a/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartComp.tsx b/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartComp.tsx
index be3e5bf655..1f1dfa150a 100644
--- a/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartComp.tsx
@@ -302,13 +302,13 @@ export const LineChartCompWithDefault = withDefault(LineChartComp, {
   series: [
     {
       dataIndex: genRandomKey(),
-      seriesName: trans("chart.spending"),
-      columnName: "spending",
+      seriesName: "Sales",
+      columnName: "sales",
     },
     {
       dataIndex: genRandomKey(),
-      seriesName: trans("chart.budget"),
-      columnName: "budget",
+      seriesName: "Growth",
+      columnName: "growth",
     },
   ],
 });
diff --git a/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartConstants.tsx
index 2685f19725..5b0554ddad 100644
--- a/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartConstants.tsx
@@ -83,11 +83,19 @@ export const XAxisDirectionOptions = [
 
 export type XAxisDirectionType = ValueFromOption<typeof XAxisDirectionOptions>;
 
+export const defaultChartData = [
+  { date: "Jan", sales: 320, growth: 250 },
+  { date: "Feb", sales: 450, growth: 300 },
+  { date: "Mar", sales: 380, growth: 340 },
+  { date: "Apr", sales: 520, growth: 400 },
+  { date: "May", sales: 480, growth: 450 },
+  { date: "Jun", sales: 600, growth: 500 }
+];
 export const noDataAxisConfig = {
   animation: false,
   xAxis: {
     type: "category",
-    name: trans("chart.noData"),
+    name: "No Data Available",
     nameLocation: "middle",
     data: [],
     axisLine: {
@@ -243,8 +251,8 @@ const EchartsOptionComp = withType(EchartsOptionMap, "funnel");
 export type CharOptionCompType = keyof typeof ChartOptionMap;
 
 export const chartUiModeChildren = {
-  title: withDefault(StringControl, trans("echarts.defaultTitle")),
-  data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource),
+  title: withDefault(StringControl, trans("lineChart.defaultTitle")),
+  data: jsonControl(toJSONObjectArray, defaultChartData),
   xAxisKey: valueComp<string>(""), // x-axis, key from data
   xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
   xAxisData: jsonControl(toArray, []),
diff --git a/client/packages/lowcoder-comps/src/comps/mermaidComp/index.tsx b/client/packages/lowcoder-comps/src/comps/mermaidComp/index.tsx
index 09ea5cba84..ea143725c4 100644
--- a/client/packages/lowcoder-comps/src/comps/mermaidComp/index.tsx
+++ b/client/packages/lowcoder-comps/src/comps/mermaidComp/index.tsx
@@ -10,11 +10,98 @@ import {
 
 import Mermaid from "./mermaid";
 
+// Collection of example mermaid diagrams that showcase different diagram types
+const mermaidExamples = {
+  flowchart: 
+`flowchart TD
+    A[Start] --> B{Is it working?}
+    B -->|Yes| C[Great!]
+    B -->|No| D[Debug]
+    D --> E[Check Documentation]
+    E --> B
+    C --> F[Deploy]`,
+
+  sequence: 
+`sequenceDiagram
+    participant User
+    participant App
+    participant API
+    participant DB
+    
+    User->>App: Submit Form
+    App->>API: Send Request
+    API->>DB: Query Data
+    DB->>API: Return Result
+    API->>App: Send Response
+    App->>User: Show Result`,
+
+  classDiagram: 
+`classDiagram
+    class User {
+      +String name
+      +String email
+      +authenticate()
+      +updateProfile()
+    }
+    class Product {
+      +String name
+      +Number price
+      +getDetails()
+    }
+    class Order {
+      +Date date
+      +Number total
+      +process()
+    }
+    User "1" --> "*" Order
+    Order "*" --> "*" Product`,
+
+  gantt: 
+`gantt
+    title Project Timeline
+    dateFormat  YYYY-MM-DD
+    
+    section Planning
+    Research           :done, a1, 2023-01-01, 10d
+    Requirements       :active, a2, after a1, 7d
+    
+    section Development
+    Design             :a3, after a2, 8d
+    Implementation     :a4, after a3, 14d
+    Testing            :a5, after a4, 7d
+    
+    section Deployment
+    Release            :milestone, after a5, 0d`,
+
+  entityRelationship: 
+`erDiagram
+    CUSTOMER }|--o{ ORDER : places
+    ORDER ||--|{ ORDER_ITEM : contains
+    CUSTOMER ||--o{ PAYMENT : makes
+    PRODUCT ||--|{ ORDER_ITEM : "ordered in"`,
+
+  journey: 
+`journey
+    title User Purchase Journey
+    section Visit Website
+      Homepage: 5: User
+      Product listing: 4: User
+      Product detail: 3: User
+    section Purchase
+      Add to cart: 4: User
+      Checkout: 3: User, Admin
+      Payment: 3: User, Admin
+    section Post-Purchase
+      Order confirmation: 5: User, Admin
+      Shipping: 4: Admin
+      Delivery: 5: User, Admin`
+};
+
+// Using the flowchart example as default
 const childrenMap = {
   code: stringExposingStateControl(
     "code",
-    `graph LR
-   Start --> Stop`
+    mermaidExamples.flowchart
   ),
   onEvent: eventHandlerControl([
     {
diff --git a/client/packages/lowcoder-comps/src/comps/parallelChartComp/parallelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/parallelChartComp/parallelChartUtils.ts
index 407a2df69e..0f7835bb08 100644
--- a/client/packages/lowcoder-comps/src/comps/parallelChartComp/parallelChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/parallelChartComp/parallelChartUtils.ts
@@ -180,7 +180,6 @@ export function getEchartsConfig(
     parallelAxis: props.data[0].map((c, i) => ({ dim: i, name: c, type: typeof props.data[1][i] === 'string'?'category':'value'}))
   };
 
-  console.log("Echarts transformedData and config", transformedData, config);
   return config;
 }
 
diff --git a/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartConstants.tsx
index 62e5be9712..f8212e74c6 100644
--- a/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartConstants.tsx
@@ -82,6 +82,41 @@ export const XAxisDirectionOptions = [
 
 export type XAxisDirectionType = ValueFromOption<typeof XAxisDirectionOptions>;
 
+// Add this new code block:
+// Realistic pie chart demo data with proper categories and values
+export const defaultPieChartData = [
+  {
+    category: "Market Share",
+    name: "Samsung",
+    value: 21.8
+  },
+  {
+    category: "Market Share",
+    name: "Apple",
+    value: 20.5
+  },
+  {
+    category: "Market Share",
+    name: "Xiaomi",
+    value: 13.4
+  },
+  {
+    category: "Market Share",
+    name: "Oppo",
+    value: 8.8
+  },
+  {
+    category: "Market Share",
+    name: "Vivo",
+    value: 8.1
+  },
+  {
+    category: "Market Share",
+    name: "Others",
+    value: 27.4
+  }
+];
+
 export const noDataAxisConfig = {
   animation: false,
   xAxis: {
@@ -241,8 +276,8 @@ export type CharOptionCompType = keyof typeof ChartOptionMap;
 
 export const chartUiModeChildren = {
   title: withDefault(StringControl, trans("echarts.defaultTitle")),
-  data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource),
-  xAxisKey: valueComp<string>(""), // x-axis, key from data
+  data: jsonControl(toJSONObjectArray, defaultPieChartData),
+  xAxisKey: valueComp<string>("name"),
   xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
   xAxisData: jsonControl(toArray, []),
   series: SeriesListComp,
diff --git a/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartUtils.ts b/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartUtils.ts
index cf3b6a664f..5453933397 100644
--- a/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartUtils.ts
@@ -280,7 +280,6 @@ export function getEchartsConfig(
     ]
   }
 
-  console.log("Echarts transformedData and config", transformedData, config);
   return config;
 }
 
diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts
index 1982cf9b47..87cecc24c5 100644
--- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts
@@ -177,7 +177,6 @@ export function getEchartsConfig(
           radius: `${props.radius}%`,
           shape: props?.areaFlag ? 'circle' : 'line',
           axisName: {
-            ...styleWrapper(props?.detailStyle, theme?.detailStyle, 13),
             show: props?.indicatorVisibility,
           },
           splitArea: {
diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx
index e863c1b209..e38b5a1319 100644
--- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx
@@ -277,6 +277,7 @@ let chartJsonModeChildren: any = {
   focus: withDefault(BoolControl, true),
   tooltip: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
+  labelVisibility: withDefault(BoolControl, true),
 }
 
 if (EchartDefaultChartStyle && EchartDefaultTextStyle && RadarLabelStyle && SankeyLineStyle) {
diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx
index 683f97c3ff..3962175314 100644
--- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx
+++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx
@@ -36,6 +36,10 @@ export function sankeyChartPropertyView(
         {children.draggable.propertyView({label: trans("sankeyChart.draggable"), tooltip: trans("sankeyChart.draggableTooltip")})}
         {children.focus.propertyView({label: trans("sankeyChart.focus"), tooltip: trans("sankeyChart.focusTooltip")})}
         {children.tooltip.propertyView({label: trans("sankeyChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
+        {children.labelVisibility.propertyView({
+          label: trans("treeChart.labelVisibility"), 
+          tooltip: trans("echarts.labelVisibilityTooltip")
+        })}
 
       </Section>
       <Section name={sectionNames.interaction}>
diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts
index 1cedb74c88..69ac87ee3b 100644
--- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts
@@ -162,9 +162,8 @@ export function getEchartsConfig(
           bottom: `${props?.bottom}%`,
           top: `${props?.top}%`,
           label: {
-            show: true,
+            show: props.labelVisibility,
             position: props.echartsLabelConfig.top,
-            ...styleWrapper(props?.detailStyle, theme?.detailStyle,15)
           },
           data: props?.echartsData.length !== 0 && props?.echartsData?.map(item => ({
               name: item.name,
diff --git a/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartConstants.tsx
index 02c8f803ff..c846eeaab2 100644
--- a/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartConstants.tsx
@@ -217,9 +217,34 @@ const ChartOptionComp = withType(ChartOptionMap, "scatter");
 const EchartsOptionComp = withType(EchartsOptionMap, "funnel");
 export type CharOptionCompType = keyof typeof ChartOptionMap;
 
+export const SCATTER_CHART_DEMO_DATA = [
+ 
+    { hours: 1.5, score: 62, student: "Alex M." },
+    { hours: 2.0, score: 65, student: "Sarah P." },
+    { hours: 2.5, score: 71, student: "James W." },
+    { hours: 2.8, score: 69, student: "Emma L." },
+    { hours: 3.0, score: 75, student: "Michael R." },
+    { hours: 3.2, score: 73, student: "Lisa K." },
+    { hours: 3.5, score: 78, student: "David H." },
+    { hours: 3.8, score: 77, student: "Sophie T." },
+    { hours: 4.0, score: 82, student: "Ryan B." },
+    { hours: 4.2, score: 84, student: "Nina C." },
+    { hours: 4.5, score: 86, student: "Thomas G." },
+    { hours: 4.8, score: 88, student: "Maria S." },
+    { hours: 5.0, score: 89, student: "Daniel F." },
+    { hours: 5.2, score: 91, student: "Anna D." },
+    { hours: 5.5, score: 90, student: "Kevin P." },
+    { hours: 5.8, score: 93, student: "Rachel M." },
+    { hours: 6.0, score: 95, student: "John L." },
+    { hours: 6.2, score: 94, student: "Emily W." },
+    { hours: 3.0, score: 68, student: "Chris B." },  // outlier - lower performance
+    { hours: 5.0, score: 96, student: "Jessica H." } // outlier - higher performance
+  
+]
+
 export const chartUiModeChildren = {
   title: withDefault(StringControl, trans("echarts.defaultTitle")),
-  data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource),
+  data: jsonControl(toJSONObjectArray, SCATTER_CHART_DEMO_DATA),
   xAxisKey: valueComp<string>(""), // x-axis, key from data
   xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
   xAxisData: jsonControl(toArray, []),
diff --git a/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartUtils.ts b/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartUtils.ts
index 67b2a4a537..f5e9bdd4be 100644
--- a/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartUtils.ts
@@ -293,7 +293,6 @@ export function getEchartsConfig(
     delete config.yAxis;
   }
 
-  console.log("Echarts transformedData and config", transformedData, config);
   return config;
 }
 
diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts
index ab8aa17b5f..52ca2aa4c8 100644
--- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts
@@ -168,7 +168,6 @@ export function getEchartsConfig(
           label: {
             show: props?.labelVisibility,
             rotate: 'tangential',
-            ...styleWrapper(props?.detailStyle, theme?.detailStyle,11)
           },
         }
       ],
diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx
index df9b573fca..7484f7ecf4 100644
--- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx
@@ -273,6 +273,7 @@ let chartJsonModeChildren: any = {
   edgeShape: withDefault(BoolControl, true),
   tooltip: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
+  labelVisibility: withDefault(BoolControl, true),
 }
 
 if (RadarLabelStyle && EchartDefaultChartStyle && EchartDefaultTextStyle) {
diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartPropertyView.tsx
index 56d8510288..f4cc5ca43d 100644
--- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartPropertyView.tsx
+++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartPropertyView.tsx
@@ -29,6 +29,10 @@ export function treeChartPropertyView(
         {children.lineWidth.propertyView({ label: trans("treeChart.lineWidth"), tooltip: trans("treeChart.lineWidthTooltip") })}
 
         {children.tooltip.propertyView({label: trans("treeChart.tooltip")})}
+        {children.labelVisibility.propertyView({
+          label: trans("treeChart.labelVisibility"), 
+          tooltip: trans("echarts.labelVisibilityTooltip")
+        })}
 
       </Section>
       <Section name={sectionNames.interaction}>
diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts
index 083b181036..d6f545b063 100644
--- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts
@@ -163,14 +163,15 @@ export function getEchartsConfig(
           symbolSize: props?.pointSize || 20, // Control the size of the nodes
           data: props?.echartsData.length !== 0 && props?.echartsData || props.echartsOption.data,
           label: {
+            show: props?.labelVisibility,
             position: "top",
             verticalAlign: "middle",
             align: "right",
-            ...styleWrapper(props?.detailStyle, theme?.detailStyle, 11),
           },
           leaves: {
             label: {
-              position: "bottom",
+              show: props?.labelVisibility,
+              position: "right",
               verticalAlign: "middle",
               align: "left"
             }
diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts
index f07d918528..02d63c8539 100644
--- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts
@@ -171,7 +171,7 @@ export function getEchartsConfig(
             ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
           },
           label: {
-            ...styleWrapper(props?.detailStyle, theme?.detailStyle, 12),
+            show: props?.labelVisibility,
           }
         }
       ]
diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts
index 73c3d7d216..66b62f7a18 100644
--- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts
+++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts
@@ -63,9 +63,9 @@ export const en = {
     title: 'Title',
     defaultTitle: 'Tree Chart',
     tooltip: 'Tooltip',
-    defaultLeft: "10",
+    defaultLeft: "20",
     left: "Left",
-    defaultRight: "10",
+    defaultRight: "20",
     right: "Right",
     defaultTop: "20",
     top: "Top",
@@ -76,7 +76,9 @@ export const en = {
     pointSizeTooltip: "Set the Point Size of the Chart.",
     defaultlineWidth: '2',
     lineWidth: "Line Width",
-    lineWidthTooltip: "Set the Line Width of the Chart."
+    lineWidthTooltip: "Set the Line Width of the Chart.",
+    labelVisibility: "Label",
+    labelVisibilityTooltip: "Show or hide the Label of the Chart."
   },
   graphChart: {
     categories: 'Categories',
@@ -214,6 +216,8 @@ export const en = {
     defaultTop:'15',
     bottom: 'Bottom',
     defaultBottom:'10',
+    labelVisibility: "Label",
+    labelVisibilityTooltip: "Show or hide the Label of the Chart."
   },
   funnelChart: {
     title: 'Title',
@@ -317,6 +321,8 @@ export const en = {
 
   },
   lineChart: {
+    title: 'Title',
+    defaultTitle: 'Line Chart',
     cellSize: "Cell Size",
     range: "Range",
     markLines: "Mark Lines",
diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx
index b9d17e3c2a..df8517fbcc 100644
--- a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx
+++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx
@@ -309,57 +309,70 @@ export const enObj: I18nObjects = {
   },
   defaultSankeyChartOption: {
     data: [
-      {name: "Category A", color: '#67F9D8'},
-      {name: "Category B", color: '#FFE434'},
-      {name: "Category C", color: '#56A3F1'},
-      {name: "Category D", color: '#FF917C'},
-      {name: "Category E", color: '#FF6347'}
+      {name: "Website Visits", color: '#3498db'},
+      {name: "Product Page", color: '#2ecc71'},
+      {name: "Cart", color: '#f39c12'},
+      {name: "Checkout", color: '#e74c3c'},
+      {name: "Purchase", color: '#9b59b6'},
+      {name: "Abandoned", color: '#95a5a6'}
     ],
     links: [
-      { source: 'Category A', target: 'Category B', value: 10 },
-      { source: 'Category A', target: 'Category C', value: 15 },
-      { source: 'Category B', target: 'Category D', value: 25 },
-      { source: 'Category C', target: 'Category D', value: 20 },
-      { source: 'Category D', target: 'Category E', value: 30 }
+      { source: 'Website Visits', target: 'Product Page', value: 1000 },
+      { source: 'Website Visits', target: 'Abandoned', value: 300 },
+      { source: 'Product Page', target: 'Cart', value: 700 },
+      { source: 'Product Page', target: 'Abandoned', value: 300 },
+      { source: 'Cart', target: 'Checkout', value: 400 },
+      { source: 'Cart', target: 'Abandoned', value: 300 },
+      { source: 'Checkout', target: 'Purchase', value: 350 },
+      { source: 'Checkout', target: 'Abandoned', value: 50 }
     ]
   },
   defaultCandleStickChartOption: {
     xAxis: {
-      data: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5"],
-    },
-    axisColor: ['#f0f0f0', '#ffffff'],
-    data:[
-      [22, 25, 18, 26],
-      [25, 23, 22, 27],
-      [23, 24, 21, 25],
-      [24, 26, 23, 27],
-      [23, 21, 20, 25]
+      data: [
+        "2024-03-01", "2024-03-04", "2024-03-05", "2024-03-06", "2024-03-07",
+        "2024-03-08", "2024-03-11", "2024-03-12", "2024-03-13", "2024-03-14"
       ],
+    },
+    axisColor: ['#E9EBF1', '#ffffff'],
+    data: [
+      // Format: [open, close, lowest, highest]
+      [185.43, 188.52, 184.74, 189.12], // Bullish day
+      [188.32, 186.85, 186.21, 189.95], // Bearish day
+      [186.90, 187.65, 185.83, 188.12], // Small bullish day
+      [187.75, 185.20, 184.90, 187.85], // Bearish day
+      [185.35, 189.20, 185.15, 189.45], // Strong bullish day
+      [189.10, 187.50, 186.80, 189.30], // Bearish day
+      [187.60, 190.25, 187.40, 190.50], // Strong bullish day
+      [190.15, 189.75, 188.90, 191.20], // Small bearish day
+      [189.80, 192.35, 189.60, 192.50], // Strong bullish day
+      [192.40, 191.85, 191.20, 193.15]  // Small bearish day
+    ],
     itemStyle: {
-      color: '#ec0000',       // Body color (rising)
-      color0: '#00da3c',      // Body color (falling)
-      borderColor: '#ec0000', // Border color (rising)
-      borderColor0: '#00da3c', // Border color (falling)
+      color: '#26A69A',      // Bullish candle color (green)
+      color0: '#EF5350',     // Bearish candle color (red)
+      borderColor: '#26A69A', // Bullish border color
+      borderColor0: '#EF5350' // Bearish border color
     }
   },
   defaultRadarChartOption: {
     color: ['#6ee1d5', '#a7dd85'],
     indicator: [
-      { name: "Indicator 1", max: 100 },
-      { name: "Indicator 2", max: 100 },
-      { name: "Indicator 3", max: 100 },
-      { name: "Indicator 4", max: 100 },
-      { name: "Indicator 5", max: 100 },
-      { name: "Indicator 6", max: 100 }
+      { name: "Performance", max: 100 },
+      { name: "Reliability", max: 100 },
+      { name: "Efficiency", max: 100 },
+      { name: "User Satisfaction", max: 100 },
+      { name: "Cost Effectiveness", max: 100 },
+      { name: "Scalability", max: 100 }
     ],
     series: [
       {
-        "name": "Data A",
-        "value": [90, 80, 70, 70, 80, 70],
+        "name": "Current System",
+        "value": [85, 72, 78, 65, 82, 68],
       },
       {
-        name: "Data B",
-        value: [60, 60, 40, 50, 50, 40],
+        name: "Competitor System",
+        value: [67, 82, 58, 73, 45, 79],
         areaColor: '#ff00ff77',
         lineColor: '#ff00ff77',
         lineWidth: 2,
@@ -397,127 +410,205 @@ export const enObj: I18nObjects = {
     ]
   },
   defaultGraphChartOption: {
-     color:{
-       pointColor: "#0000ff",
-       lineColor: "#00000033"
-     },
-     categories: [
-        {name: "Nodes"},
-        {name: "Edges"}
-      ],
-      nodes: [
-        {name: "Node 1", category: 0},
-        {name: "Node 2", category: 0},
-        {name: "Node 3", category: 0}
-      ],
-      links: [
-        {source: "Node 1", target: "Node 2", category: 1},
-        {source: "Node 2", target: "Node 3", category: 1}
-      ]
+    color: {
+      pointColor: "#4285F4",
+      lineColor: "#00000045"
+    },
+    categories: [
+      {name: "Person", itemStyle: {color: "#4285F4"}},
+      {name: "Company", itemStyle: {color: "#34A853"}},
+      {name: "Project", itemStyle: {color: "#EA4335"}}
+    ],
+    nodes: [
+      {id: "1", name: "John Smith", value: 25, category: 0, symbolSize: 25},
+      {id: "2", name: "Jane Doe", value: 20, category: 0, symbolSize: 20},
+      {id: "3", name: "Acme Inc", value: 30, category: 1, symbolSize: 30},
+      {id: "4", name: "Project X", value: 25, category: 2, symbolSize: 25}
+    ],
+    links: [
+      {source: "1", target: "3", value: 8, lineStyle: {width: 2}},
+      {source: "1", target: "4", value: 6, lineStyle: {width: 2}},
+      {source: "2", target: "3", value: 5, lineStyle: {width: 1}},
+      {source: "3", target: "4", value: 9, lineStyle: {width: 3}}
+    ]
   },
   defaultTreeChartOption: {
     data: [{
-        name: "Parent",
+      name: "Company Structure",
+      children: [
+        {
+          name: "Executive",
+          children: [
+            { name: "CEO", value: 1 },
+            { name: "CFO", value: 1 },
+            { name: "COO", value: 1 }
+          ]
+        },
+        {
+          name: "Product",
+          children: [
+            { name: "Engineering", value: 25 },
+            { name: "Design", value: 10 },
+            { name: "Product Management", value: 8 }
+          ]
+        },
+        {
+          name: "Marketing",
+          children: [
+            { name: "Social Media", value: 5 },
+            { name: "Content", value: 7 },
+            { name: "Analytics", value: 3 }
+          ]
+        }
+      ]
+    }],
+    pointColor: "#3498db",
+    lineColor: "#95a5a6",
+    label: {
+      show: true,
+      position: "right",
+      distance: 5,
+      fontSize: 12,
+      color: "#333"
+    },
+    emphasis: {
+      focus: "descendant"
+    },
+    expandAndCollapse: true,
+    initialTreeDepth: 2,
+    layout: "orthogonal",
+    orient: "horizontal",
+    symbolSize: 10
+  },
+  defaultTreemapChartOption: {
+    data: [
+      {
+        name: 'Company Budget',
+        value: 1000,
         children: [
           {
-            name: "Child 1",
+            name: 'Product Development',
+            value: 400,
+            itemStyle: { color: '#3498db' },
             children: [
-              { name: "Child 1-1" },
-              { name: "Child 1-2" }
+              { name: 'Engineering', value: 250, itemStyle: { color: '#3498db' } },
+              { name: 'Design', value: 80, itemStyle: { color: '#5dade2' } },
+              { name: 'Research', value: 70, itemStyle: { color: '#85c1e9' } }
             ]
           },
           {
-            name: "Child 2",
+            name: 'Marketing',
+            value: 300,
+            itemStyle: { color: '#2ecc71' },
             children: [
-              { name: "Child 2-1" },
-              { name: "Child 2-2" }
+              { name: 'Digital Advertising', value: 150, itemStyle: { color: '#2ecc71' } },
+              { name: 'Content Creation', value: 80, itemStyle: { color: '#58d68d' } },
+              { name: 'Events', value: 70, itemStyle: { color: '#80e5a8' } }
+            ]
+          },
+          {
+            name: 'Operations',
+            value: 200,
+            itemStyle: { color: '#e74c3c' },
+            children: [
+              { name: 'Office Space', value: 100, itemStyle: { color: '#e74c3c' } },
+              { name: 'Equipment', value: 50, itemStyle: { color: '#ec7063' } },
+              { name: 'Utilities', value: 50, itemStyle: { color: '#f1948a' } }
+            ]
+          },
+          {
+            name: 'HR',
+            value: 100,
+            itemStyle: { color: '#9b59b6' },
+            children: [
+              { name: 'Recruiting', value: 30, itemStyle: { color: '#9b59b6' } },
+              { name: 'Training', value: 40, itemStyle: { color: '#af7ac5' } },
+              { name: 'Benefits', value: 30, itemStyle: { color: '#c39bd3' } }
             ]
           }
         ]
-      }],
-    pointColor: "#380e81",
-    lineColor: "#1a93b8",
+      }
+    ],
+    label: {
+      show: true,
+      formatter: '{b}',
+      fontSize: 12,
+      color: '#333',
+      position: 'inside'
+    },
+    itemStyle: {
+      borderColor: '#fff',
+      borderWidth: 1,
+      gapWidth: 1
+    },
+    breadcrumb: {
+      show: true
+    },
+    roam: false
   },
-  defaultTreemapChartOption: {
+  defaultSunburstChartOption: {
     data: [
       {
-        name: 'Category A',
-        value: 100,
+        name: "Traffic",
         children: [
           {
-            name: 'Subcategory A1',
-            value: 70,
+            name: "Direct",
+            value: 350,
             children: [
-              { name: 'Item A1-1', value: 10 },
-              { name: 'Item A1-2', value: 20 },
-              { name: 'Item A1-3', value: 10 },
-              { name: 'Item A1-4', value: 30 }
+              {name: "New", value: 200},
+              {name: "Return", value: 150}
             ]
-          }
-        ]
-      },
-      {
-        name: 'Category B',
-        value: 80,
-        children: [
+          },
           {
-            name: 'Subcategory B1',
-            value: 50,
+            name: "Social",
+            value: 300,
             children: [
-              { name: 'Item B1-1', value: 20 },
-              { name: 'Item B1-2', value: 15 },
-              { name: 'Item B1-3', value: 15 }
+              {name: "FB", value: 120},
+              {name: "IG", value: 100},
+              {name: "TW", value: 80}
             ]
           },
+          {
+            name: "Search",
+            value: 400,
+            children: [
+              {name: "Google", value: 300},
+              {name: "Bing", value: 100}
+            ]
+          }
         ]
       }
     ],
-    color: ['#5470C6', '#91CC75', '#FAC858', '#6b51a1']
-  },
-  defaultSunburstChartOption: {
-    data: [
-       {
-          name: "Grandparent",
-          children: [
-            {
-              name: "Parent A",
-              children: [
-                {name: "Child A1", value: 10},
-                {name: "Child A2", value: 20}
-              ]
-            },
-            {
-              name: "Parent B",
-              children: [
-                {name: "Child B1", value: 15},
-                {name: "Child B2", value: 25}
-              ]
-            }
-          ]
-        }
-    ],
     levels: [
       {
         itemStyle: {
-          color: '#f6e58d'
-        },
-      },
-      {
-        itemStyle: {
-          color: '#12e192'
-        },
+          color: '#3498db',
+          borderWidth: 2,
+          borderColor: 'white'
+        }
       },
       {
         itemStyle: {
-          color: '#ffbe76'
-        },
+          color: '#2ecc71',
+          borderWidth: 1,
+          borderColor: 'white'
+        }
       },
       {
         itemStyle: {
-          color: '#007979'
-        },
+          color: '#e74c3c',
+          borderWidth: 1,
+          borderColor: 'white'
+        }
       }
-    ]
+    ],
+    label: {
+      show: true,
+      formatter: '{b}',
+      fontSize: 12,
+      color: 'white'
+    },
+    radius: ['20%', '90%']
   },
   defaultCalendarChartOption: {
     data:[
@@ -536,28 +627,31 @@ export const enObj: I18nObjects = {
   },
   defaultThemeriverChartOption: {
     data: [
-      ['2025-01-01', 12, 'Product A'],
-      ['2025-01-01', 10, 'Product B'],
-      ['2025-01-01', 15, 'Product C'],
-      ['2025-01-01', 8, 'Product D'],
-      ['2025-01-02', 14, 'Product A'],
-      ['2025-01-02', 9, 'Product B'],
-      ['2025-01-02', 16, 'Product C'],
-      ['2025-01-02', 7, 'Product D'],
-      ['2025-01-03', 16, 'Product A'],
-      ['2025-01-03', 12, 'Product B'],
-      ['2025-01-03', 18, 'Product C'],
-      ['2025-01-03', 10, 'Product D'],
-      ['2025-01-04', 20, 'Product A'],
-      ['2025-01-04', 15, 'Product B'],
-      ['2025-01-04', 22, 'Product C'],
-      ['2025-01-04', 12, 'Product D'],
-      ['2025-01-05', 18, 'Product A'],
-      ['2025-01-05', 13, 'Product B'],
-      ['2025-01-05', 20, 'Product C'],
-      ['2025-01-05', 11, 'Product D']
+      // Technology sector data - January to December
+      ['2024-01', 125, 'Smartphones'],
+      ['2024-02', 138, 'Smartphones'],
+      ['2024-03', 152, 'Smartphones'],
+      ['2024-04', 167, 'Smartphones'],
+      
+      ['2024-01', 95, 'Laptops'],
+      ['2024-02', 110, 'Laptops'],
+      ['2024-03', 125, 'Laptops'],
+      ['2024-04', 120, 'Laptops'],
+    
+      ['2024-01', 55, 'Tablets'],
+      ['2024-02', 60, 'Tablets'],
+      ['2024-03', 65, 'Tablets'],
+      ['2024-04', 72, 'Tablets'],
+      
+      ['2024-01', 30, 'Wearables'],
+      ['2024-02', 42, 'Wearables'],
+      ['2024-03', 55, 'Wearables'],
+      ['2024-04', 68, 'Wearables'],
+      
+ 
+   
     ],
-    color: ['#5470C6', '#91CC75', '#FAC858', '#6b51a1']
+    color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4']
   },
 
   defaultMapJsonOption: defaultMapData,

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


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