# XY Chart rotate 90 degrees

**URL:** <https://forum.inductiveautomation.com/t/xy-chart-rotate-90-degrees/78750>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 5, 2023, 7:55am UTC](https://forum.inductiveautomation.com/t/xy-chart-rotate-90-degrees/78750 "2023-09-05T07:55:46Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![chaoliang](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@chaoliang](https://forum.inductiveautomation.com/u/chaoliang)\
**Post date:** [September 5, 2023, 7:55am UTC](https://forum.inductiveautomation.com/t/xy-chart-rotate-90-degrees/78750/1 "2023-09-05T07:55:46Z")

</div>

I found the following chart useful for some of the cases, it looks like XY chart clock wise rotated 90degree.

I couldn't get it configured using XY chart, maybe I didn't do it correct or XY chart just cannot do it, it's some other chart perspective does not have.

Any suggestions?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/0/d0ed1ad08673532936377338a3ff7973348f0779.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [September 5, 2023, 8:43am UTC](https://forum.inductiveautomation.com/t/xy-chart-rotate-90-degrees/78750/2 "2023-09-05T08:43:33Z")

</div>

> [@chaoliang](#):
>
> it looks like XY chart clock wise rotated 90degree.

No, that describes rotating the whole image. You are describing a **horizontal bar chart**.

* * *

1. Drop an XY Chart into your view.
2. Under `props.dataSources` create an array `sampleData`. Paste the following into `props.dataSources.sampleData`.

```auto
[
  {
    "fruit": "apples",
    "boxes": 17
  },
  {
    "fruit": "oranges",
    "boxes": 11
  },
  {
    "fruit": "bananas",
    "boxes": 14
  },
  {
    "fruit": "mango",
    "boxes": 5
  }
]

```

1. Make the following changes:

- Delete `yAxes.1`. (You only need one y-axis, `yAxes.0`.)
- Delete `series.1`. (You only have one series of data, `series.0`.)
- `xAxes.0.name : cat`. (Short for category. Name as you wish.)
- `xAxes.0.label.text : Boxes` (x-axis units).
- `xAxes.0.render : value`. (Bars will be proportional to value, not date or category.)
- `yAxes.0.name : fruit`. (Name as you wish.)
- `yAxis.0.label.text : Fruits` (text that will appear below the chart).
- `yAxes.0.render : category`. (The y-axis category will be the name of the fruit.)
- `series.0.name : fruits` (or whatever you like).
- `series.0.data.source : sampleData` (created in step 2).
- `series.0.data.x : boxes` (the field name in sampleData to be rendered on the x-axis).
- `series.0.data.y : fruit` (the field name in sampleData to be rendered on the y-axis).
- `series.0.xAxis : cat` (defined above).
- `series.0.yAxis : fruit` (defined above).
- `series.0.render : column` (the magic part).  
You should now have a horizontal bar chart.  
If some of the labels are missing on the y-axis (typically every second one) then,
- `yAxes.0.appearance.grid.minDistance : 1` (should make every label appear).

 ![XY chart horizontal bar](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/e/eeec33ec6a26645fc5bd7ee7ead2b6a140b2c6f7.png)

I really recommend that you do this exercise and then try to create your own chart. Make sure your data is correct and sensibly named.  
You can also delete `dataSources.example` as you won't be using it.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [September 5, 2023, 8:52am UTC](https://forum.inductiveautomation.com/t/xy-chart-rotate-90-degrees/78750/3 "2023-09-05T08:52:30Z")

</div>

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

How hot is it today ?  
Bananas !

---

<div class="post-metadata">

**Author:** ![chaoliang](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@chaoliang](https://forum.inductiveautomation.com/u/chaoliang)\
**Post date:** [September 6, 2023, 9:34pm UTC](https://forum.inductiveautomation.com/t/xy-chart-rotate-90-degrees/78750/4 "2023-09-06T21:34:30Z")

</div>

Much Appreciated.

I missed out the following setting:

- `yAxes.0.render : category`. (The y-axis category will be the name of the fruit.)

I have to say:  
You are only limited by your imagination in Ignition.