diff --git a/.babelignore b/.babelignore
new file mode 100644
index 00000000..20ebae44
--- /dev/null
+++ b/.babelignore
@@ -0,0 +1 @@
+.umi
diff --git a/docs/guide/get-started.md b/docs/guide/get-started.md
index 321ad54a..5e370d80 100644
--- a/docs/guide/get-started.md
+++ b/docs/guide/get-started.md
@@ -116,3 +116,161 @@ export default () => {
return
}
```
+
+## Update Data
+
+```tsx
+import React, { useCallback, useState } from 'react'
+import { LineChart } from '@opd/g2plot-react'
+
+const config = {
+ height: 400,
+ title: {
+ visible: true,
+ text: 'LineChart',
+ },
+ description: {
+ visible: true,
+ text: 'This is Description',
+ },
+ padding: 'auto',
+ forceFit: true,
+ xField: 'year',
+ yField: 'value',
+ label: {
+ visible: true,
+ type: 'point',
+ },
+ point: {
+ visible: true,
+ size: 5,
+ },
+ xAxis: {
+ tickCount: 10,
+ },
+}
+
+export default () => {
+ const getChart = useCallback((chart) => {
+ console.log(chart)
+ }, [])
+ const getContainer = useCallback((container) => {
+ console.log(container)
+ }, [])
+
+ const [data, setData] = useState([
+ { year: '1991', value: 3 },
+ { year: '1992', value: 4 },
+ { year: '1993', value: 3.5 },
+ { year: '1994', value: 5 },
+ { year: '1995', value: 4.9 },
+ { year: '1996', value: 6 },
+ { year: '1997', value: 7 },
+ { year: '1998', value: 9 },
+ { year: '1999', value: 11 },
+ ])
+
+ const handleBtnClick = useCallback(() => {
+ setData([
+ { year: '1991', value: 3 },
+ { year: '1992', value: 4 },
+ { year: '1993', value: 3.5 },
+ { year: '1994', value: 5 },
+ { year: '1995', value: 4.9 },
+ { year: '1996', value: 6 },
+ { year: '1997', value: 7 },
+ { year: '1998', value: 9 },
+ { year: '1999', value: 11 },
+ { year: '2000', value: 14 },
+ ])
+ }, [])
+
+ return (
+
+
+
+
+ )
+}
+```
+
+## Update Config
+
+```tsx
+import React, { useCallback, useState } from 'react'
+import { LineChart } from '@opd/g2plot-react'
+
+const config = {
+ height: 400,
+ title: {
+ visible: true,
+ text: 'LineChart',
+ },
+ description: {
+ visible: true,
+ text: 'This is Description',
+ },
+ padding: 'auto',
+ forceFit: true,
+ xField: 'year',
+ yField: 'value',
+ label: {
+ visible: true,
+ type: 'point',
+ },
+ point: {
+ visible: true,
+ size: 5,
+ },
+ xAxis: {
+ tickCount: 10,
+ },
+ data: [
+ { year: '1991', value: 3 },
+ { year: '1992', value: 4 },
+ { year: '1993', value: 3.5 },
+ { year: '1994', value: 5 },
+ { year: '1995', value: 4.9 },
+ { year: '1996', value: 6 },
+ { year: '1997', value: 7 },
+ { year: '1998', value: 9 },
+ { year: '1999', value: 11 },
+ ],
+}
+
+export default () => {
+ const getChart = useCallback((chart) => {
+ console.log(chart)
+ }, [])
+ const getContainer = useCallback((container) => {
+ console.log(container)
+ }, [])
+
+ const [restConfig, setConfig] = useState({})
+
+ const handleBtnClick = useCallback(() => {
+ setConfig({
+ point: {
+ visible: false,
+ },
+ })
+ }, [])
+
+ return (
+
+
+
+
+ )
+}
+```
diff --git a/src/components/base/index.tsx b/src/components/base/index.tsx
index d48c844e..aecab505 100644
--- a/src/components/base/index.tsx
+++ b/src/components/base/index.tsx
@@ -134,6 +134,7 @@ const BaseChart = (
if (!isEqual(config, configRef.current)) {
configRef.current = cloneDeep(config)
chart.updateConfig(config as RecursivePartial)
+ chart.render()
} else {
if (data) {
chart.changeData(data)