# Round corners XY Chart

**URL:** <https://forum.inductiveautomation.com/t/round-corners-xy-chart/72637>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [April 19, 2023, 11:54am UTC](https://forum.inductiveautomation.com/t/round-corners-xy-chart/72637 "2023-04-19T11:54:13Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kaleb.s](https://avatars.discourse-cdn.com/v4/letter/k/f08c70/32.png) [@kaleb.s](https://forum.inductiveautomation.com/u/kaleb.s)\
**Post date:** [April 19, 2023, 11:54am UTC](https://forum.inductiveautomation.com/t/round-corners-xy-chart/72637/1 "2023-04-19T11:54:13Z")

</div>

Is there a way to round the corners of the background of an XY Chart in perspective? I know i can add a property to the actual bars i have on my XY Chart to round the tops but cant figure out how to actually round all four corners of the entire XY Chart.

---

<div class="post-metadata">

**Author:** ![djs](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@djs](https://forum.inductiveautomation.com/u/djs)\
**Post date:** [April 19, 2023, 12:40pm UTC](https://forum.inductiveautomation.com/t/round-corners-xy-chart/72637/2 "2023-04-19T12:40:25Z")

</div>

Under the _background_ prop, set the _render_ to "color" and the _opacity_ to to 0.  
Then in the style configurator, type in the borer-radii that you want.

The background of the chart is an SVG rectangle that you can modify in the _background_ prop, and it overlays the actual background of the component. So you have to make it invisible to reveal the background that responds to CSS.