diff --git a/docs/manual/plots/bar.en.md b/docs/manual/plots/bar.en.md
index f66babd61e..25190aebf6 100644
--- a/docs/manual/plots/bar.en.md
+++ b/docs/manual/plots/bar.en.md
@@ -117,4 +117,15 @@ bar.render();
🎨 For an overview of the bar plot options see the [API reference](/en/docs/api/plots/bar).
-
\ No newline at end of file
+
+
+## Bar plot features
+
+### Set corner-radius of column
+
+通过设置 `barStyle.radius` 可以指定柱子的圆角，数据类型可以是 `number` 也可以是 `number[]`。
+
+当柱子数值为正值时，`const [r1, r2, r3, r4] = radius` 依次代表柱子左上角、右上角、右下角、左下角的 `radius`。
+当柱子数值为负值时，`const [r1, r2, r3, r4] = radius` 依次代表柱子左下角、右下角、右上角、左上角的 `radius`。
+
+
diff --git a/docs/manual/plots/bar.zh.md b/docs/manual/plots/bar.zh.md
index f09279090b..e90a807ec8 100644
--- a/docs/manual/plots/bar.zh.md
+++ b/docs/manual/plots/bar.zh.md
@@ -117,4 +117,15 @@ bar.render();
🎨 条形图详细的配置参考 [API 文档](/zh/docs/api/plots/bar)。
-
\ No newline at end of file
+
+
+## 条形图特性
+
+### 设置柱子的圆角
+
+通过设置 `barStyle.radius` 可以指定柱子的圆角，数据类型可以是 `number` 也可以是 `number[]`。
+
+当柱子数值为正值时，`const [r1, r2, r3, r4] = radius` 依次代表柱子左上角、右上角、右下角、左下角的 `radius`。
+当柱子数值为负值时，`const [r1, r2, r3, r4] = radius` 依次代表柱子左下角、右下角、右上角、左上角的 `radius`。
+
+
diff --git a/docs/manual/plots/column.en.md b/docs/manual/plots/column.en.md
index a31ca38e35..8be924d2b1 100644
--- a/docs/manual/plots/column.en.md
+++ b/docs/manual/plots/column.en.md
@@ -139,3 +139,12 @@ fetch('https://gw.alipayobjects.com/os/antfincdn/K0kfOzo4j%24/column.json')
通过组合指定柱子最大宽度、最小宽度可以达到指定柱子宽度的效果。
+
+### Set corner-radius of column
+
+通过设置 `columnStyle.radius` 可以指定柱子的圆角，数据类型可以是 `number` 也可以是 `number[]`。
+
+当柱子数值为正值时，`const [r1, r2, r3, r4] = radius` 依次代表柱子左上角、右上角、右下角、左下角的 `radius`。
+当柱子数值为负值时，`const [r1, r2, r3, r4] = radius` 依次代表柱子左下角、右下角、右上角、左上角的 `radius`。
+
+
diff --git a/docs/manual/plots/column.zh.md b/docs/manual/plots/column.zh.md
index 520a630a18..1f392bef25 100644
--- a/docs/manual/plots/column.zh.md
+++ b/docs/manual/plots/column.zh.md
@@ -139,3 +139,13 @@ fetch('https://gw.alipayobjects.com/os/antfincdn/K0kfOzo4j%24/column.json')
通过组合指定柱子最大宽度、最小宽度可以达到指定柱子宽度的效果。
+
+### 设置柱子的圆角
+
+通过设置 `columnStyle.radius` 可以指定柱子的圆角，数据类型可以是 `number` 也可以是 `number[]`。
+
+当柱子数值为正值时，`const [r1, r2, r3, r4] = radius` 依次代表柱子左上角、右上角、右下角、左下角的 `radius`。
+当柱子数值为负值时，`const [r1, r2, r3, r4] = radius` 依次代表柱子左下角、右下角、右上角、左上角的 `radius`。
+
+
+
diff --git a/examples/bar/grouped/demo/corner-radius.ts b/examples/bar/grouped/demo/corner-radius.ts
new file mode 100644
index 0000000000..3baef2c057
--- /dev/null
+++ b/examples/bar/grouped/demo/corner-radius.ts
@@ -0,0 +1,71 @@
+import { Bar } from '@antv/g2plot';
+
+const data = [
+ {
+ label: 'Mon.',
+ type: 'series1',
+ value: 2800,
+ },
+ {
+ label: 'Mon.',
+ type: 'series2',
+ value: 2260,
+ },
+ {
+ label: 'Tues.',
+ type: 'series1',
+ value: 1800,
+ },
+ {
+ label: 'Tues.',
+ type: 'series2',
+ value: 1300,
+ },
+ {
+ label: 'Wed.',
+ type: 'series1',
+ value: 950,
+ },
+ {
+ label: 'Wed.',
+ type: 'series2',
+ value: 900,
+ },
+ {
+ label: 'Thur.',
+ type: 'series1',
+ value: 500,
+ },
+ {
+ label: 'Thur.',
+ type: 'series2',
+ value: 390,
+ },
+ {
+ label: 'Fri.',
+ type: 'series1',
+ value: 170,
+ },
+ {
+ label: 'Fri.',
+ type: 'series2',
+ value: 100,
+ },
+];
+
+const stackedBarPlot = new Bar('container', {
+ data,
+ isGroup: true,
+ xField: 'value',
+ yField: 'label',
+ seriesField: 'type',
+ marginRatio: 0,
+ label: {
+ // 可手动配置 label 数据标签位置
+ position: 'right', // 'left', 'middle', 'right'
+ offset: 4,
+ },
+ barStyle: { radius: [2, 2, 0, 0] },
+});
+
+stackedBarPlot.render();
diff --git a/examples/bar/grouped/demo/meta.json b/examples/bar/grouped/demo/meta.json
index 05a9586893..233e806c21 100644
--- a/examples/bar/grouped/demo/meta.json
+++ b/examples/bar/grouped/demo/meta.json
@@ -11,6 +11,14 @@
"en": "Grouped bar plot"
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/dfnmnp5KDb/4c47dfc9-534c-42b5-b25b-12219c854e0f.png"
+ },
+ {
+ "filename": "corner-radius.ts",
+ "title": {
+ "zh": "圆角条形图",
+ "en": "Bar plot with corner-radius"
+ },
+ "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/vFQNz1dCaD/21d77486-a9a3-4287-bc49-24fc40ad4800.png"
}
]
}
diff --git a/examples/column/grouped/demo/corner-radius.ts b/examples/column/grouped/demo/corner-radius.ts
new file mode 100644
index 0000000000..9c6a0c9c5d
--- /dev/null
+++ b/examples/column/grouped/demo/corner-radius.ts
@@ -0,0 +1,18 @@
+import { Column } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/antfincdn/PC3daFYjNw/column-data.json')
+ .then((data) => data.json())
+ .then((data) => {
+ const column = new Column('container', {
+ data,
+ xField: 'city',
+ yField: 'value',
+ seriesField: 'type',
+ isGroup: 'true',
+ columnStyle: {
+ radius: [20, 20, 0, 0],
+ },
+ });
+
+ column.render();
+ });
diff --git a/examples/column/grouped/demo/meta.json b/examples/column/grouped/demo/meta.json
index 6947ae33dc..14082d3253 100644
--- a/examples/column/grouped/demo/meta.json
+++ b/examples/column/grouped/demo/meta.json
@@ -12,6 +12,14 @@
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*cE7xSYYgqCcAAAAAAAAAAAAAARQnAQ"
},
+ {
+ "filename": "corner-radius.ts",
+ "title": {
+ "zh": "圆角柱状图",
+ "en": "Column plot with corner-radius"
+ },
+ "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/vA%26pfMx397/0d8d9a6e-51ba-48f2-bc6d-091d77d94e2e.png"
+ },
{
"filename": "stacked2.ts",
"title": {