diff --git a/package.json b/package.json
index 71098f39..dadb300b 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@klinecharts/pro",
+  "name": "@hasee_hive/klinecharts-pro",
   "version": "0.1.1",
   "description": "Financial chart built out of the box based on KLineChart.",
   "type": "module",
diff --git a/src/ChartProComponent.tsx b/src/ChartProComponent.tsx
index 47696350..3ed08752 100644
--- a/src/ChartProComponent.tsx
+++ b/src/ChartProComponent.tsx
@@ -42,7 +42,7 @@ interface PrevSymbolPeriod {
   period: Period
 }
 
-function createIndicator (widget: Nullable<Chart>, indicatorName: string, isStack?: boolean, paneOptions?: PaneOptions): Nullable<string> {
+function createIndicator(widget: Nullable<Chart>, indicatorName: string, isStack?: boolean, paneOptions?: PaneOptions): Nullable<string> {
   if (indicatorName === 'VOL') {
     paneOptions = { gap: { bottom: 2 }, ...paneOptions }
   }
@@ -101,21 +101,6 @@ const ChartProComponent: Component<ChartProComponentProps> = props => {
     visible: false, indicatorName: '', paneId: '', calcParams: [] as Array<any>
   })
 
-  props.ref({
-    setTheme,
-    getTheme: () => theme(),
-    setStyles,
-    getStyles: () => widget!.getStyles(),
-    setLocale,
-    getLocale: () => locale(),
-    setTimezone: (timezone: string) => { setTimezone({ key: timezone, text: translateTimezone(props.timezone, locale()) }) },
-    getTimezone: () => timezone().key,
-    setSymbol,
-    getSymbol: () => symbol(),
-    setPeriod,
-    getPeriod: () => period()
-  })
-
   const documentResize = () => {
     widget?.resize()
   }
@@ -211,6 +196,28 @@ const ChartProComponent: Component<ChartProComponentProps> = props => {
       }
     })
 
+    props.ref({
+      setTheme,
+      getTheme: () => theme(),
+      setStyles,
+      getStyles: () => widget!.getStyles(),
+      setLocale,
+      getLocale: () => locale(),
+      setTimezone: (timezone: string) => { setTimezone({ key: timezone, text: translateTimezone(props.timezone, locale()) }) },
+      getTimezone: () => timezone().key,
+      setSymbol,
+      getSymbol: () => symbol(),
+      setPeriod,
+      getPeriod: () => period(),
+      applyNewData: (data: any) => {
+        console.log(widget);
+        widget!.applyNewData(data);
+      },
+      getKLineChartWidget: () => {
+        return widget;
+      }
+    })
+
     if (widget) {
       const watermarkContainer = widget.getDom('candle_pane', DomPosition.Main)
       if (watermarkContainer) {
@@ -440,13 +447,13 @@ const ChartProComponent: Component<ChartProComponentProps> = props => {
 
   return (
     <>
-      <i class="icon-close klinecharts-pro-load-icon"/>
+      <i class="icon-close klinecharts-pro-load-icon" />
       <Show when={symbolSearchModalVisible()}>
         <SymbolSearchModal
           locale={props.locale}
           datafeed={props.datafeed}
           onSymbolSelected={symbol => { setSymbol(symbol) }}
-          onClose={() => { setSymbolSearchModalVisible(false) }}/>
+          onClose={() => { setSymbolSearchModalVisible(false) }} />
       </Show>
       <Show when={indicatorModalVisible()}>
         <IndicatorModal
@@ -481,7 +488,7 @@ const ChartProComponent: Component<ChartProComponentProps> = props => {
               }
             }
             setSubIndicators(newSubIndicators)
-          }}/>
+          }} />
       </Show>
       <Show when={timezoneModalVisible()}>
         <TimezoneModal
@@ -521,7 +528,7 @@ const ChartProComponent: Component<ChartProComponentProps> = props => {
           locale={props.locale}
           params={indicatorSettingModalParams()}
           onClose={() => { setIndicatorSettingModalParams({ visible: false, indicatorName: '', paneId: '', calcParams: [] }) }}
-          onConfirm={(params)=> {
+          onConfirm={(params) => {
             const modalParams = indicatorSettingModalParams()
             widget?.overrideIndicator({ name: modalParams.indicatorName, calcParams: params }, modalParams.paneId)
           }}
@@ -537,7 +544,7 @@ const ChartProComponent: Component<ChartProComponentProps> = props => {
           try {
             await startTransition(() => setDrawingBarVisible(!drawingBarVisible()))
             widget?.resize()
-          } catch (e) {}    
+          } catch (e) { }
         }}
         onSymbolClick={() => { setSymbolSearchModalVisible(!symbolSearchModalVisible()) }}
         onPeriodChange={setPeriod}
@@ -554,7 +561,7 @@ const ChartProComponent: Component<ChartProComponentProps> = props => {
       <div
         class="klinecharts-pro-content">
         <Show when={loadingVisible()}>
-          <Loading/>
+          <Loading />
         </Show>
         <Show when={drawingBarVisible()}>
           <DrawingBar
@@ -563,12 +570,12 @@ const ChartProComponent: Component<ChartProComponentProps> = props => {
             onModeChange={mode => { widget?.overrideOverlay({ mode: mode as OverlayMode }) }}
             onLockChange={lock => { widget?.overrideOverlay({ lock }) }}
             onVisibleChange={visible => { widget?.overrideOverlay({ visible }) }}
-            onRemoveClick={(groupId) => { widget?.removeOverlay({ groupId }) }}/>
+            onRemoveClick={(groupId) => { widget?.removeOverlay({ groupId }) }} />
         </Show>
         <div
           ref={widgetRef}
           class='klinecharts-pro-widget'
-          data-drawing-bar-visible={drawingBarVisible()}/>
+          data-drawing-bar-visible={drawingBarVisible()} />
       </div>
     </>
   )
diff --git a/src/KLineChartPro.tsx b/src/KLineChartPro.tsx
index bac9e893..22198243 100644
--- a/src/KLineChartPro.tsx
+++ b/src/KLineChartPro.tsx
@@ -128,4 +128,12 @@ export default class KLineChartPro implements ChartPro {
   getPeriod (): Period {
     return this._chartApi!.getPeriod()
   }
+
+  applyNewData (data: any): void {
+    this._chartApi!.applyNewData(data);
+  }
+
+  getKLineChartWidget () {
+    return this._chartApi!.getKLineChartWidget();
+  }
 }
diff --git a/src/types.ts b/src/types.ts
index 8f1b97c9..b73e434d 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -12,7 +12,7 @@
  * limitations under the License.
  */
 
-import { KLineData, Styles, DeepPartial } from 'klinecharts'
+import { KLineData, Styles, DeepPartial, Chart, Nullable } from 'klinecharts'
 
 export interface SymbolInfo {
   ticker: string
@@ -71,4 +71,6 @@ export interface ChartPro {
   getSymbol(): SymbolInfo
   setPeriod(period: Period): void
   getPeriod(): Period
+  applyNewData(data : any): void
+  getKLineChartWidget(): Nullable<Chart>
 }
diff --git a/vite.config.ts b/vite.config.ts
index 5e9176ec..65d78afa 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,9 +2,25 @@
 
 import { defineConfig } from 'vite'
 import solidPlugin from 'vite-plugin-solid'
+import path from "path"
+
 
 export default defineConfig({
   plugins: [solidPlugin()],
+  resolve: {
+    alias: {
+      "@klinecharts/pro": path.resolve(__dirname, "../pro/src"),
+    },
+  },
+  optimizeDeps: {
+    exclude: ["@klinecharts/pro"], // important — prevent prebundling
+  },
+  server: {
+    fs: {
+      // allow vite to serve files outside project root
+      allow: [".."],
+    },
+  },
   build: {
     cssTarget: 'chrome61',
     sourcemap: true,