diff --git a/client/packages/lowcoder-cli-template-typescript/package.json b/client/packages/lowcoder-cli-template-typescript/package.json
index 50b495d7f..4b85ecf87 100644
--- a/client/packages/lowcoder-cli-template-typescript/package.json
+++ b/client/packages/lowcoder-cli-template-typescript/package.json
@@ -1,9 +1,9 @@
 {
   "name": "lowcoder-cli-template-typescript",
-  "version": "0.0.16",
+  "version": "0.0.20",
   "type": "module",
   "scripts": {
-    "start": "vite",
+    "start": "NODE_OPTIONS=--max_old_space_size=6144 vite",
     "build": "lowcoder-cli build",
     "build_publish": "lowcoder-cli build --publish"
   },
@@ -13,11 +13,15 @@
       "hillcharts": {
         "name": "Hillcharts Demo",
         "icon": "./icons/hills.svg",
-        "description": "Hillchart Plugin Demo Component"
+        "description": "Hillchart Plugin Demo Component",
+        "layoutInfo": {
+          "w": 10,
+          "h": 40
+        }
       }
     }
   },
-  "devDependencies": {
+  "dependencies": {
     "@observablehq/runtime": "^4.8.2",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
diff --git a/client/packages/lowcoder-cli-template-typescript/src/HillchartsComp.tsx b/client/packages/lowcoder-cli-template-typescript/src/HillchartsComp.tsx
index f5cb2de30..edf1f8478 100644
--- a/client/packages/lowcoder-cli-template-typescript/src/HillchartsComp.tsx
+++ b/client/packages/lowcoder-cli-template-typescript/src/HillchartsComp.tsx
@@ -5,6 +5,7 @@ import {
   Section,
   withDefault,
   withExposingConfigs,
+  withMethodExposing,
   eventHandlerControl,
   styleControl,
   toJSONObjectArray,
@@ -12,13 +13,14 @@ import {
   AutoHeightControl,
   EditorContext,
 } from "lowcoder-sdk";
+import { useResizeDetector } from "react-resize-detector";
 
 import styles from "./styles.module.css";
 
 import { i18nObjs, trans } from "./i18n/comps";
 
 import { Chart } from './vendors'
-import { useContext, useEffect, useRef, useState } from "react";
+import { useState } from "react";
 
 
 export const CompStyles = [
@@ -59,7 +61,13 @@ export const CompStyles = [
   }
 ] as const;
 
-
+interface Point {
+  id: number,
+  color?: string,
+  description?: string,
+  x: number,
+  size?: number,
+}
 
 // const HillchartsCompBase = new UICompBuilder(childrenMap, (props: any) => {
 let HillchartsCompBase = (function () {
@@ -74,42 +82,57 @@ let HillchartsCompBase = (function () {
         value: "change",
         description: "Triggers when Chart data changes",
       },
-    ]),
+    ] as const),
   };
   
-  return new UICompBuilder(childrenMap, (props: { onEvent: (arg0: string) => void; styles: { backgroundColor: any; border: any; radius: any; borderWidth: any; margin: any; padding: any; textSize: any; }; data: any[] | null | undefined; }) => {
+  return new UICompBuilder(childrenMap, (props: {
+    onEvent: any;
+    styles: { backgroundColor: any; border: any; radius: any; borderWidth: any; margin: any; padding: any; textSize: any; };
+    data: any[] | null | undefined;
+    autoHeight: boolean;
+  }) => {
   const handleDataChange = () => {
     props.onEvent("change");
   };
 
-  const conRef = useRef<HTMLDivElement>(null);
-  const [dimensions, setDimensions] = useState({ width: 400, height: 250 });
+  const [dimensions, setDimensions] = useState({ width: 480, height: 280 });
+  const { width, height, ref: conRef } = useResizeDetector({onResize: () =>{
+    const container = conRef.current;
+    if(!container || !width || !height) return;
 
-  useEffect(() => {
-    if (conRef.current) {
+    if(props.autoHeight) {
       setDimensions({
-        width: conRef.current.clientWidth,
-        height: conRef.current.clientHeight
-      });
+        width,
+        height: dimensions.height,
+      })
+      return;
     }
-  }, []);
+
+    setDimensions({
+      width,
+      height,
+    })
+  }});
 
   return (
-      <div ref={conRef} className={styles.wrapper} style={{
-          display: "flex",
-          justifyContent: "center",
-          height: `100%`,
-          width: `100%`,
-          backgroundColor: `${props.styles.backgroundColor}`,
-          borderColor: `${props.styles.border}`,
-          borderRadius: `${props.styles.radius}`,
-          borderWidth: `${props.styles.borderWidth}`,
-          margin: `${props.styles.margin}`,
-          padding: `${props.styles.padding}`,
-          fontSize: `${props.styles.textSize}`,
-        }}>
-        <Chart data={props.data} height={dimensions.height} width={dimensions.width} onDataChange={handleDataChange}/>
-      </div>
+    <div ref={conRef} className={styles.wrapper} style={{
+      height: `100%`,
+      width: `100%`,
+      backgroundColor: `${props.styles.backgroundColor}`,
+      borderColor: `${props.styles.border}`,
+      borderRadius: `${props.styles.radius}`,
+      borderWidth: `${props.styles.borderWidth}`,
+      margin: `${props.styles.margin}`,
+      padding: `${props.styles.padding}`,
+      fontSize: `${props.styles.textSize}`,
+    }}>
+      <Chart
+        data={props.data}
+        height={dimensions.height}
+        width={dimensions.width}
+        onDataChange={handleDataChange}
+      />
+    </div>
   );
 })
 .setPropertyViewFn((children: any) => {
@@ -137,6 +160,38 @@ HillchartsCompBase = class extends HillchartsCompBase {
   }
 };
 
+HillchartsCompBase = withMethodExposing(HillchartsCompBase, [
+  {
+    method: {
+      name: "setPoint",
+      description: trans("methods.setPoint"),
+      params: [{
+        name: "data",
+        type: "JSON",
+        description: "JSON value"
+      }],
+    },
+    execute: (comp: any, values: any[]) => {
+      const point = values[0] as Point;
+      if(typeof point !== 'object') {
+        return Promise.reject(trans("methods.invalidInput"))
+      }
+      if(!point.id) {
+        return Promise.reject(trans("methods.requiredField", { field: 'ID' }));
+      }
+      if(!point.x) {
+        return Promise.reject(trans("methods.requiredField", { field: 'X position' }));
+      }
+      const data = comp.children.data.getView(); 
+      const newData = [
+        ...data,
+        point,
+      ];
+      comp.children.data.dispatchChangeValueAction(JSON.stringify(newData, null, 2));
+    }
+  },
+]);
+
 export default withExposingConfigs(HillchartsCompBase, [
   new NameConfig("data", trans("component.data")),
 ]);
diff --git a/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/en.ts
index 159776065..a8a3dcf56 100644
--- a/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/en.ts
+++ b/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/en.ts
@@ -27,4 +27,9 @@ export const en = {
   "component": {
     "data": "Hillchart Data",
   },
+  "methods": {
+    "setPoint": "Set Point",
+    "invalidInput": "Invalid Input",
+    "requiredField": "{field} is required",
+  }
 };
diff --git a/client/packages/lowcoder-cli-template-typescript/src/styles.module.css b/client/packages/lowcoder-cli-template-typescript/src/styles.module.css
index be702f84d..b69979743 100644
--- a/client/packages/lowcoder-cli-template-typescript/src/styles.module.css
+++ b/client/packages/lowcoder-cli-template-typescript/src/styles.module.css
@@ -3,7 +3,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100%;
+  /* height: 100%; */
   border: 1px solid #dddddd;
   background-color: white;
 }
diff --git a/client/packages/lowcoder-cli-template-typescript/src/vendors/Chart.jsx b/client/packages/lowcoder-cli-template-typescript/src/vendors/Chart.jsx
index ca36718e1..befadc8f7 100644
--- a/client/packages/lowcoder-cli-template-typescript/src/vendors/Chart.jsx
+++ b/client/packages/lowcoder-cli-template-typescript/src/vendors/Chart.jsx
@@ -194,9 +194,14 @@ function Chart(props) {
       // Render an updated chart
       runtime.module(define, Inspector.into(chartRef), 'chart');
     }
-  }, [chartRef, props.data]);
-
-  return <div ref={useChartRef} style={{ height: "100%" }} />;
+  }, [chartRef, props.data, props.width, props.height]);
+
+  return (
+    <div
+      ref={useChartRef}
+      style={{ height: "100%" }}
+    />
+  );
 }
 
 
diff --git a/client/yarn.lock b/client/yarn.lock
index e0d64b590..9dead2fc8 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -3675,93 +3675,93 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm-eabi@npm:4.9.4":
-  version: 4.9.4
-  resolution: "@rollup/rollup-android-arm-eabi@npm:4.9.4"
+"@rollup/rollup-android-arm-eabi@npm:4.9.5":
+  version: 4.9.5
+  resolution: "@rollup/rollup-android-arm-eabi@npm:4.9.5"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm64@npm:4.9.4":
-  version: 4.9.4
-  resolution: "@rollup/rollup-android-arm64@npm:4.9.4"
+"@rollup/rollup-android-arm64@npm:4.9.5":
+  version: 4.9.5
+  resolution: "@rollup/rollup-android-arm64@npm:4.9.5"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-arm64@npm:4.9.4":
-  version: 4.9.4
-  resolution: "@rollup/rollup-darwin-arm64@npm:4.9.4"
+"@rollup/rollup-darwin-arm64@npm:4.9.5":
+  version: 4.9.5
+  resolution: "@rollup/rollup-darwin-arm64@npm:4.9.5"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-x64@npm:4.9.4":
-  version: 4.9.4
-  resolution: "@rollup/rollup-darwin-x64@npm:4.9.4"
+"@rollup/rollup-darwin-x64@npm:4.9.5":
+  version: 4.9.5
+  resolution: "@rollup/rollup-darwin-x64@npm:4.9.5"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm-gnueabihf@npm:4.9.4":
-  version: 4.9.4
-  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.9.4"
+"@rollup/rollup-linux-arm-gnueabihf@npm:4.9.5":
+  version: 4.9.5
+  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.9.5"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-gnu@npm:4.9.4":
-  version: 4.9.4
-  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.9.4"
+"@rollup/rollup-linux-arm64-gnu@npm:4.9.5":
+  version: 4.9.5
+  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.9.5"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-musl@npm:4.9.4":
-  version: 4.9.4
-  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.9.4"
+"@rollup/rollup-linux-arm64-musl@npm:4.9.5":
+  version: 4.9.5
+  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.9.5"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-riscv64-gnu@npm:4.9.4":
-  version: 4.9.4
-  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.9.4"
+"@rollup/rollup-linux-riscv64-gnu@npm:4.9.5":
+  version: 4.9.5
+  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.9.5"
   conditions: os=linux & cpu=riscv64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-gnu@npm:4.9.4":
-  version: 4.9.4
-  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.9.4"
+"@rollup/rollup-linux-x64-gnu@npm:4.9.5":
+  version: 4.9.5
+  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.9.5"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-musl@npm:4.9.4":
-  version: 4.9.4
-  resolution: "@rollup/rollup-linux-x64-musl@npm:4.9.4"
+"@rollup/rollup-linux-x64-musl@npm:4.9.5":
+  version: 4.9.5
+  resolution: "@rollup/rollup-linux-x64-musl@npm:4.9.5"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-arm64-msvc@npm:4.9.4":
-  version: 4.9.4
-  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.9.4"
+"@rollup/rollup-win32-arm64-msvc@npm:4.9.5":
+  version: 4.9.5
+  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.9.5"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-ia32-msvc@npm:4.9.4":
-  version: 4.9.4
-  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.9.4"
+"@rollup/rollup-win32-ia32-msvc@npm:4.9.5":
+  version: 4.9.5
+  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.9.5"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-x64-msvc@npm:4.9.4":
-  version: 4.9.4
-  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.9.4"
+"@rollup/rollup-win32-x64-msvc@npm:4.9.5":
+  version: 4.9.5
+  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.9.5"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -15974,22 +15974,22 @@ __metadata:
   linkType: hard
 
 "rollup@npm:^4.2.0":
-  version: 4.9.4
-  resolution: "rollup@npm:4.9.4"
-  dependencies:
-    "@rollup/rollup-android-arm-eabi": 4.9.4
-    "@rollup/rollup-android-arm64": 4.9.4
-    "@rollup/rollup-darwin-arm64": 4.9.4
-    "@rollup/rollup-darwin-x64": 4.9.4
-    "@rollup/rollup-linux-arm-gnueabihf": 4.9.4
-    "@rollup/rollup-linux-arm64-gnu": 4.9.4
-    "@rollup/rollup-linux-arm64-musl": 4.9.4
-    "@rollup/rollup-linux-riscv64-gnu": 4.9.4
-    "@rollup/rollup-linux-x64-gnu": 4.9.4
-    "@rollup/rollup-linux-x64-musl": 4.9.4
-    "@rollup/rollup-win32-arm64-msvc": 4.9.4
-    "@rollup/rollup-win32-ia32-msvc": 4.9.4
-    "@rollup/rollup-win32-x64-msvc": 4.9.4
+  version: 4.9.5
+  resolution: "rollup@npm:4.9.5"
+  dependencies:
+    "@rollup/rollup-android-arm-eabi": 4.9.5
+    "@rollup/rollup-android-arm64": 4.9.5
+    "@rollup/rollup-darwin-arm64": 4.9.5
+    "@rollup/rollup-darwin-x64": 4.9.5
+    "@rollup/rollup-linux-arm-gnueabihf": 4.9.5
+    "@rollup/rollup-linux-arm64-gnu": 4.9.5
+    "@rollup/rollup-linux-arm64-musl": 4.9.5
+    "@rollup/rollup-linux-riscv64-gnu": 4.9.5
+    "@rollup/rollup-linux-x64-gnu": 4.9.5
+    "@rollup/rollup-linux-x64-musl": 4.9.5
+    "@rollup/rollup-win32-arm64-msvc": 4.9.5
+    "@rollup/rollup-win32-ia32-msvc": 4.9.5
+    "@rollup/rollup-win32-x64-msvc": 4.9.5
     "@types/estree": 1.0.5
     fsevents: ~2.3.2
   dependenciesMeta:
@@ -16023,7 +16023,7 @@ __metadata:
       optional: true
   bin:
     rollup: dist/bin/rollup
-  checksum: 134b1fd8886a1dc86b2cadada979174e736a39aec12d069261fe8b799ad0c4aa3213188ea49adeee155669315016617260e43eea754436c50121aa359899da4d
+  checksum: a6bb721f2251a2299e99be2eb58b0949571545809b75571c42baa50e749437aa9ef40f0660644d992e2387ba7f0775271ab9388fe4fbb02c6c3fc5db6a8b9711
   languageName: node
   linkType: hard