# How to Switch a Vertical Bar Chart to Horizontal Bar Chart in XY chart Component in Perspective?

**URL:** <https://forum.inductiveautomation.com/t/how-to-switch-a-vertical-bar-chart-to-horizontal-bar-chart-in-xy-chart-component-in-perspective/58103>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [April 6, 2022, 11:58am UTC](https://forum.inductiveautomation.com/t/how-to-switch-a-vertical-bar-chart-to-horizontal-bar-chart-in-xy-chart-component-in-perspective/58103 "2022-04-06T11:58:01Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![bhalakumar.s](https://avatars.discourse-cdn.com/v4/letter/b/e95f7d/32.png) [@bhalakumar.s](https://forum.inductiveautomation.com/u/bhalakumar.s)\
**Post date:** [April 6, 2022, 11:58am UTC](https://forum.inductiveautomation.com/t/how-to-switch-a-vertical-bar-chart-to-horizontal-bar-chart-in-xy-chart-component-in-perspective/58103/1 "2022-04-06T11:58:01Z")

</div>

HI,  
I am having a XY Chart With two series configured, Series-1 Render Set to Column and Series -2 Render Set to Line. By default it was plotted vertically. But I want that to be plotted horizontally. Is an option to switch between vertical to horizonal as in Vision xy chart component property in perspective?

- Thanks

---

<div class="post-metadata">

**Author:** ![jthorpe](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jthorpe/32/36639_2.png) [@jthorpe](https://forum.inductiveautomation.com/u/jthorpe)\
**Post date:** [May 12, 2022, 7:51pm UTC](https://forum.inductiveautomation.com/t/how-to-switch-a-vertical-bar-chart-to-horizontal-bar-chart-in-xy-chart-component-in-perspective/58103/2 "2022-05-12T19:51:58Z")

</div>

Hi there, you should be able to do this by manually swapping the x-axis and y-axis properties.

I was able to do this by swapping the `xAxes` and `yAxes` props of a the xy chart in bar mode, and then within each series of the `series` prop swap the `xAxis` and `yAxis` props and then the `data.x` and `data.y` props and this should give you your chart rendered horizontally.

This is what my props look like after doing this to the default xy chart component as it is when you first drag it onto a View and changed each series to render as a column.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/7/77f242fc2d15f74ab7062849112ef14f7ac808c7.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/7/5772d8cf618b4d286986148718d7a2b6bf81d810.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/b/5b54e782cffee1e009c72e9e0aeca188056e0bfa.png)

---

<div class="post-metadata">

**Author:** ![bhalakumar.s](https://avatars.discourse-cdn.com/v4/letter/b/e95f7d/32.png) [@bhalakumar.s](https://forum.inductiveautomation.com/u/bhalakumar.s)\
**Post date:** [June 20, 2022, 5:21am UTC](https://forum.inductiveautomation.com/t/how-to-switch-a-vertical-bar-chart-to-horizontal-bar-chart-in-xy-chart-component-in-perspective/58103/3 "2022-06-20T05:21:43Z")

</div>

Hi,  
Thanks, It worked!!

---

<div class="post-metadata">

**Author:** ![jiyoung\_hwang1](https://avatars.discourse-cdn.com/v4/letter/j/bc79bd/32.png) [@jiyoung\_hwang1](https://forum.inductiveautomation.com/u/jiyoung_hwang1)\
**Post date:** [April 3, 2023, 1:42am UTC](https://forum.inductiveautomation.com/t/how-to-switch-a-vertical-bar-chart-to-horizontal-bar-chart-in-xy-chart-component-in-perspective/58103/4 "2023-04-03T01:42:07Z")

</div>

Hi jthorpe

 ![3](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/2/92a7546e94b4dcc4fb8c5bc48bf843909133c50b.gif)

I'm new to ignition so I don't know

When I use the chart in perspective, it looks like the attached picture, but there are no xAxes. What should I do?

let me know

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [April 3, 2023, 1:57am UTC](https://forum.inductiveautomation.com/t/how-to-switch-a-vertical-bar-chart-to-horizontal-bar-chart-in-xy-chart-component-in-perspective/58103/5 "2023-04-03T01:57:57Z")

</div>

It looks like you are not using a XY Chart. Use a XY Chart component, and set the series render property to column. Then, follow the instructions above to achieve a horizontal result.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/f/7f4e0e9b193ba30f2f92d0f072e2a3f3f352e7bf.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/a/4ae4cf28652ff149a35ba5978b7bb6dddee8488a.png)

---

<div class="post-metadata">

**Author:** ![jiyoung\_hwang1](https://avatars.discourse-cdn.com/v4/letter/j/bc79bd/32.png) [@jiyoung\_hwang1](https://forum.inductiveautomation.com/u/jiyoung_hwang1)\
**Post date:** [April 3, 2023, 2:18am UTC](https://forum.inductiveautomation.com/t/how-to-switch-a-vertical-bar-chart-to-horizontal-bar-chart-in-xy-chart-component-in-perspective/58103/7 "2023-04-03T02:18:11Z")

</div>

Thanks for letting me know

I'll ask you one more question

Two data are shown in the xy chart. How do I add one more data?

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [April 3, 2023, 3:12am UTC](https://forum.inductiveautomation.com/t/how-to-switch-a-vertical-bar-chart-to-horizontal-bar-chart-in-xy-chart-component-in-perspective/58103/8 "2023-04-03T03:12:20Z")

</div>

If you hover your mouse over series, a plus button should appear.

---

<div class="post-metadata">

**Author:** ![jiyoung\_hwang1](https://avatars.discourse-cdn.com/v4/letter/j/bc79bd/32.png) [@jiyoung\_hwang1](https://forum.inductiveautomation.com/u/jiyoung_hwang1)\
**Post date:** [April 3, 2023, 4:47am UTC](https://forum.inductiveautomation.com/t/how-to-switch-a-vertical-bar-chart-to-horizontal-bar-chart-in-xy-chart-component-in-perspective/58103/10 "2023-04-03T04:47:09Z")

</div>

![1](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/c/fcfbe92f9f820ae14940f888039de94f65e3e5c5.gif)  
 ![2](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/6/e6d3c73a33772d8f03c839fbac945d9c601707e8.gif)

Not added

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [April 3, 2023, 4:49am UTC](https://forum.inductiveautomation.com/t/how-to-switch-a-vertical-bar-chart-to-horizontal-bar-chart-in-xy-chart-component-in-perspective/58103/11 "2023-04-03T04:49:59Z")

</div>

I'm not sure how you plan on populating the the data for your bars, but these resources will help understand the mechanics of that chart:  
[Ignition Docs, XY Chart, Version 8.1](https://docs.inductiveautomation.com/display/DOC81/Perspective+-+XY+Chart)

> **[XY Chart Video at Inductive University](https://inductiveuniversity.com/videos/perspective-xy-chart/8.1)**
>
> Learn how to work with the Perspective XY Chart component.

---

<div class="post-metadata">

**Author:** ![jiyoung\_hwang1](https://avatars.discourse-cdn.com/v4/letter/j/bc79bd/32.png) [@jiyoung\_hwang1](https://forum.inductiveautomation.com/u/jiyoung_hwang1)\
**Post date:** [April 3, 2023, 5:31am UTC](https://forum.inductiveautomation.com/t/how-to-switch-a-vertical-bar-chart-to-horizontal-bar-chart-in-xy-chart-component-in-perspective/58103/13 "2023-04-03T05:31:00Z")

</div>

Thanky you

---

<div class="post-metadata">

**Author:** ![jayachandran.m](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@jayachandran.m](https://forum.inductiveautomation.com/u/jayachandran.m)\
**Post date:** [October 30, 2025, 10:32am UTC](https://forum.inductiveautomation.com/t/how-to-switch-a-vertical-bar-chart-to-horizontal-bar-chart-in-xy-chart-component-in-perspective/58103/14 "2025-10-30T10:32:21Z")

</div>

Hi team, i have made the chart as suggested, it is working for me. But only alternate row of label is shown in Y axis. How to fix this.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/b/8b1984d83d2c599f05c9df21b00eca136ec5d8fd.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/6/f686337a906a82c1c801b45f5c37dbb8ea73a196.png)

---

<div class="post-metadata">

**Author:** ![jayachandran.m](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@jayachandran.m](https://forum.inductiveautomation.com/u/jayachandran.m)\
**Post date:** [October 30, 2025, 11:34am UTC](https://forum.inductiveautomation.com/t/how-to-switch-a-vertical-bar-chart-to-horizontal-bar-chart-in-xy-chart-component-in-perspective/58103/15 "2025-10-30T11:34:35Z")

</div>

Hi team, found the solution. I have adjusted the Y-axis→ appearance→grid→minDistance adjusted to 5. Now the all the y axis label are displayed.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/1/a1fb08e265ca3c2a8c5dc108aeff3ac52ab8bb91.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/f/2ff20ea58bbc8e604f6686919a3ef26b12a0392b.png)
