# XY Chart Round Column Corners

**URL:** <https://forum.inductiveautomation.com/t/xy-chart-round-column-corners/70224>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [February 23, 2023, 2:32pm UTC](https://forum.inductiveautomation.com/t/xy-chart-round-column-corners/70224 "2023-02-23T14:32:02Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Matthew\_DeLuca](https://avatars.discourse-cdn.com/v4/letter/m/3ab097/32.png) [@Matthew\_DeLuca](https://forum.inductiveautomation.com/u/Matthew_DeLuca)\
**Post date:** [February 23, 2023, 2:32pm UTC](https://forum.inductiveautomation.com/t/xy-chart-round-column-corners/70224/1 "2023-02-23T14:32:02Z")

</div>

Is there a way to round the corners of the columns / bars in an XY chart where the series is displayed as a column.

---

<div class="post-metadata">

**Author:** ![Emma\_Ngo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/emma_ngo/32/44559_2.png) [@Emma\_Ngo](https://forum.inductiveautomation.com/u/Emma_Ngo)\
**Post date:** [March 9, 2023, 11:59pm UTC](https://forum.inductiveautomation.com/t/xy-chart-round-column-corners/70224/2 "2023-03-09T23:59:10Z")

</div>

Hi [Matthew\_DeLuca](https://forum.inductiveautomation.com/u/Matthew_DeLuca),  
You may achieve that by using [user created properties](https://docs.inductiveautomation.com/display/DOC81/Perspective+Component+Properties#PerspectiveComponentProperties-UserCreatedProperties). To round the corners of the columns in the XY chart, you could manually add the properties `cornerRadiusTopLeft` and `cornerRadiusTopRight` under the manually created `columns.template.column` object in your series property.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/8/48448858a651683918880bff7640be0e13a3c468.png)

---

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [May 29, 2024, 12:12pm UTC](https://forum.inductiveautomation.com/t/xy-chart-round-column-corners/70224/3 "2024-05-29T12:12:07Z")

</div>

Hi @Emma_Ngo,

I've just implement your solution to round the bars corners because it seems like is not possible to manipulate them with css.

I wonder what other properties I could change in this way, because I can't find a list of them and if I try to add some other properties they don't work (for example boxShadow).

Thank you for the support.

---

<div class="post-metadata">

**Author:** ![Senthee\_Wu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/senthee_wu/32/67770_2.png) [@Senthee\_Wu](https://forum.inductiveautomation.com/u/Senthee_Wu)\
**Post date:** [January 8, 2025, 8:30am UTC](https://forum.inductiveautomation.com/t/xy-chart-round-column-corners/70224/4 "2025-01-08T08:30:01Z")

</div>

Hi,  
Do you know what field to add to hide the x-axis or to change the x-axis color to white, I have tried many custom fields and none of them work!

 ![9f97b707-71eb-4875-8351-50d35e2ff359](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/6/36990401e5b817eed90d35600296baee7cef0e73.jpeg)

---

<div class="post-metadata">

**Author:** ![Ujwal\_Wankhede](https://avatars.discourse-cdn.com/v4/letter/u/4af34b/32.png) [@Ujwal\_Wankhede](https://forum.inductiveautomation.com/u/Ujwal_Wankhede)\
**Post date:** [January 8, 2025, 9:49am UTC](https://forum.inductiveautomation.com/t/xy-chart-round-column-corners/70224/5 "2025-01-08T09:49:55Z")

</div>

Set `yAxes>[x]` grid opacity to 0

 ![Screenshot sample](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/b/0bc34e6cfa796c5d0f4df43684a9e420159ddb24.png)

---

<div class="post-metadata">

**Author:** ![Senthee\_Wu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/senthee_wu/32/67770_2.png) [@Senthee\_Wu](https://forum.inductiveautomation.com/u/Senthee_Wu)\
**Post date:** [January 8, 2025, 10:14am UTC](https://forum.inductiveautomation.com/t/xy-chart-round-column-corners/70224/6 "2025-01-08T10:14:08Z")

</div>

![fe75c307-851c-4084-9e13-86964d58d0be](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/7/7762dec70d0f5f03b14266d92d8aa53524682125.jpeg)

I just checked and I did write 0 here.

---

<div class="post-metadata">

**Author:** ![Senthee\_Wu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/senthee_wu/32/67770_2.png) [@Senthee\_Wu](https://forum.inductiveautomation.com/u/Senthee_Wu)\
**Post date:** [January 8, 2025, 10:16am UTC](https://forum.inductiveautomation.com/t/xy-chart-round-column-corners/70224/7 "2025-01-08T10:16:20Z")

</div>

> **My chart**
>
> ```python
> [
> {
> "type": "ia.chart.xy",
> "version": 0,
> "props": {
> "title": {
> "text": ".",
> "appearance": {
> "color": "#FFFFFF",
> "font": {
> "size": 18,
> "weight": 500
> }
> }
> },
> "subtitle": {
> "text": ".",
> "appearance": {
> "color": "#FFFFFF"
> }
> },
> "legend": {
> "enabled": false,
> "position": "absolute",
> "absolute": {
> "x": "40%",
> "y": "-12%"
> },
> "markers": {
> "height": 10,
> "stroke": {
> "width": 0
> }
> },
> "labels": {
> "font": {
> "weight": 50,
> "size": 10,
> "color": "#000000"
> }
> }
> },
> "xAxes": [
> {
> "name": "type",
> "label": {
> "enabled": false,
> "text": "Type",
> "color": "#4E5969"
> },
> "visible": true,
> "tooltip": {
> "enabled": true,
> "text": "",
> "cornerRadius": 3,
> "pointerLength": 4,
> "background": {
> "color": "",
> "opacity": 1
> }
> },
> "inversed": false,
> "render": "category",
> "category": {
> "break": {
> "enabled": false,
> "startCategory": "",
> "endCategory": "",
> "size": 0.05
> }
> },
> "date": {
> "baseInterval": {
> "enabled": false,
> "timeUnit": "hour",
> "count": 1,
> "skipEmptyPeriods": false
> },
> "range": {
> "max": "",
> "min": "",
> "useStrict": false
> },
> "break": {
> "enabled": false,
> "startDate": "",
> "endDate": "",
> "size": 0.05
> },
> "inputFormat": "yyyy-MM-dd kk:mm:ss",
> "format": "yyyy/M/d HH:mm"
> },
> "value": {
> "range": {
> "max": "",
> "min": "",
> "useStrict": false
> },
> "logarithmic": false,
> "break": {
> "enabled": false,
> "startValue": 0,
> "endValue": 100,
> "size": 0.05
> },
> "format": "#,###.##"
> },
> "appearance": {
> "opposite": false,
> "inside": false,
> "labels": {
> "color": "#080808",
> "opacity": 1,
> "rotation": 0,
> "verticalCenter": "middle",
> "horizontalCenter": "middle"
> },
> "grid": {
> "color": "",
> "opacity": 0,
> "dashArray": "",
> "minDistance": 100,
> "position": 0.5
> },
> "font": {
> "size": 14,
> "weight": 400
> }
> }
> }
> ],
> "yAxes": [
> {
> "name": "value",
> "label": {
> "enabled": false,
> "text": "num",
> "color": "#4E5969"
> },
> "visible": true,
> "tooltip": {
> "enabled": true,
> "text": "",
> "cornerRadius": 3,
> "pointerLength": 4,
> "background": {
> "color": "",
> "opacity": 1
> }
> },
> "inversed": false,
> "render": "value",
> "category": {
> "break": {
> "enabled": false,
> "startCategory": "",
> "endCategory": "",
> "size": 0.05
> }
> },
> "date": {
> "baseInterval": {
> "enabled": false,
> "timeUnit": "hour",
> "count": 1,
> "skipEmptyPeriods": false
> },
> "range": {
> "max": "",
> "min": "",
> "useStrict": false
> },
> "break": {
> "enabled": false,
> "startDate": "",
> "endDate": "",
> "size": 0.05
> },
> "inputFormat": "yyyy-MM-dd kk:mm:ss",
> "format": "M/d/yyyy HH:mm:ss"
> },
> "value": {
> "range": {
> "max": "",
> "min": "",
> "useStrict": false
> },
> "logarithmic": false,
> "break": {
> "enabled": false,
> "startValue": 0,
> "endValue": 100,
> "size": 0.05
> },
> "format": "#,###.##"
> },
> "appearance": {
> "opposite": false,
> "inside": false,
> "labels": {
> "color": "#080808",
> "opacity": 0,
> "rotation": 0,
> "verticalCenter": "middle",
> "horizontalCenter": "middle"
> },
> "grid": {
> "color": "",
> "opacity": 0,
> "dashArray": "",
> "minDistance": null,
> "position": 0.5
> },
> "font": {
> "size": 14,
> "weight": 400
> }
> }
> }
> ],
> "series": [
> {
> "name": "Left",
> "label": {
> "text": "Left"
> },
> "visible": true,
> "hiddenInLegend": false,
> "defaultState": {
> "visible": true
> },
> "data": {
> "source": "data",
> "x": "Type",
> "y": "Num"
> },
> "xAxis": "type",
> "yAxis": "value",
> "zIndex": 0,
> "tooltip": {
> "enabled": true,
> "text": "{name}: [bold]{valueY}[/]",
> "cornerRadius": 3,
> "pointerLength": 4,
> "background": {
> "color": "",
> "opacity": 1
> }
> },
> "render": "column",
> "candlestick": {
> "open": {
> "x": "",
> "y": ""
> },
> "high": {
> "x": "",
> "y": ""
> },
> "low": {
> "x": "",
> "y": ""
> },
> "appearance": {
> "fill": {
> "color": "",
> "opacity": 1
> },
> "stroke": {
> "color": "",
> "opacity": 1,
> "width": 1
> },
> "stacked": false,
> "deriveFieldsFromData": {
> "fill": {
> "color": "",
> "opacity": ""
> },
> "stroke": {
> "color": "",
> "opacity": "",
> "width": ""
> }
> },
> "heatRules": {
> "enabled": false,
> "max": "",
> "min": "",
> "dataField": ""
> }
> }
> },
> "column": {
> "open": {
> "x": "",
> "y": ""
> },
> "appearance": {
> "fill": {
> "color": "#037D6C",
> "opacity": 1
> },
> "stroke": {
> "color": "",
> "opacity": 1,
> "width": 0
> },
> "stacked": false,
> "width": 40,
> "height": null,
> "deriveFieldsFromData": {
> "fill": {
> "color": "",
> "opacity": ""
> },
> "stroke": {
> "color": "",
> "opacity": "",
> "width": ""
> }
> },
> "heatRules": {
> "enabled": false,
> "max": "",
> "min": "",
> "dataField": ""
> }
> }
> },
> "line": {
> "open": {
> "x": "",
> "y": ""
> },
> "appearance": {
> "connect": true,
> "tensionX": 1,
> "tensionY": 1,
> "minDistance": 0.5,
> "stroke": {
> "width": 2,
> "opacity": 1,
> "color": "#080808",
> "dashArray": ""
> },
> "fill": {
> "opacity": 0,
> "color": ""
> },
> "bullets": [
> {
> "enabled": true,
> "render": "circle",
> "width": 5,
> "height": 5,
> "label": {
> "text": "{value}",
> "position": {
> "dx": 0,
> "dy": 0
> }
> },
> "fill": {
> "color": "#080808",
> "opacity": 0.6
> },
> "stroke": {
> "color": "",
> "opacity": 0,
> "width": 0
> },
> "rotation": 0,
> "tooltip": {
> "enabled": true,
> "text": "{name}\n时间：{categoryX}[/]\nCpk：{valueY}[/]",
> "cornerRadius": 3,
> "pointerLength": 4,
> "background": {
> "color": "",
> "opacity": 1
> }
> },
> "deriveFieldsFromData": {
> "fill": {
> "color": "",
> "opacity": ""
> },
> "stroke": {
> "color": "",
> "opacity": "",
> "width": ""
> },
> "rotation": ""
> },
> "heatRules": {
> "enabled": false,
> "max": 100,
> "min": 2,
> "dataField": ""
> }
> }
> ]
> }
> },
> "stepLine": {
> "open": {
> "x": "",
> "y": ""
> },
> "appearance": {
> "connect": true,
> "tensionX": 1,
> "tensionY": 1,
> "minDistance": 0.5,
> "stroke": {
> "width": 3,
> "opacity": 1,
> "color": "",
> "dashArray": ""
> },
> "fill": {
> "opacity": 0,
> "color": ""
> },
> "bullets": [
> {
> "enabled": true,
> "render": "circle",
> "width": 10,
> "height": 10,
> "label": {
> "text": "{value}",
> "position": {
> "dx": 0,
> "dy": 0
> }
> },
> "fill": {
> "color": "",
> "opacity": 1
> },
> "stroke": {
> "color": "",
> "opacity": 1,
> "width": 1
> },
> "rotation": 0,
> "tooltip": {
> "enabled": true,
> "text": "{name}: [bold]{valueY}[/]",
> "cornerRadius": 3,
> "pointerLength": 4,
> "background": {
> "color": "",
> "opacity": 1
> }
> },
> "deriveFieldsFromData": {
> "fill": {
> "color": "",
> "opacity": ""
> },
> "stroke": {
> "color": "",
> "opacity": "",
> "width": ""
> },
> "rotation": ""
> },
> "heatRules": {
> "enabled": false,
> "max": 100,
> "min": 2,
> "dataField": ""
> }
> }
> ]
> }
> },
> "columns": {
> "template": {
> "column": {
> "cornerRadiusTopLeft": 8,
> "cornerRadiusTopRight": 8
> }
> }
> }
> }
> ],
> "style": {
> "classes": "Text/Content"
> },
> "dataSources": {
> "data": {
> "$": [
> "ds",
> 192,
> 1736317518836
> ],
> "$columns": [
> {
> "name": "Type",
> "data": [
> "Core Remaining",
> "Strip Break",
> "Electrode Defect",
> "Startup"
> ],
> "type": "String"
> },
> {
> "name": "Num",
> "data": [
> 220,
> 95,
> 80,
> 20
> ],
> "type": "Double"
> }
> ]
> }
> }
> },
> "meta": {
> "name": "XYChart"
> },
> "position": {},
> "custom": {},
> "propConfig": {
> "props.dataSources.data[0].datetime": {
> "binding": {
> "config": {
> "path": "view.params.st"
> },
> "type": "property"
> }
> },
> "props.dataSources.data[1].datetime": {
> "binding": {
> "config": {
> "path": "view.params.et"
> },
> "type": "property"
> }
> }
> }
> }
> ]
> 
> ```

---

<div class="post-metadata">

**Author:** ![Ujwal\_Wankhede](https://avatars.discourse-cdn.com/v4/letter/u/4af34b/32.png) [@Ujwal\_Wankhede](https://forum.inductiveautomation.com/u/Ujwal_Wankhede)\
**Post date:** [January 8, 2025, 12:36pm UTC](https://forum.inductiveautomation.com/t/xy-chart-round-column-corners/70224/8 "2025-01-08T12:36:04Z")

</div>

You can achieve this but then your lowest value bar will disappear.

 ![Screenshot Use Strict](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/3/3391926bce0ba67fa45fbd55e229a882719fa735.png)