# Stacked Bar Graph with Non-Numeric X-Axis

**URL:** <https://forum.inductiveautomation.com/t/stacked-bar-graph-with-non-numeric-x-axis/78094>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [August 18, 2023, 5:29pm UTC](https://forum.inductiveautomation.com/t/stacked-bar-graph-with-non-numeric-x-axis/78094 "2023-08-18T17:29:57Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![hd2023](https://avatars.discourse-cdn.com/v4/letter/h/f9ae1b/32.png) [@hd2023](https://forum.inductiveautomation.com/u/hd2023)\
**Post date:** [August 18, 2023, 5:29pm UTC](https://forum.inductiveautomation.com/t/stacked-bar-graph-with-non-numeric-x-axis/78094/1 "2023-08-18T17:29:58Z")

</div>

Hi everyone.

I am trying to make a stacked bar chart similar to the one below.

 ![c3652f92bfd93d25789259872fe3bd3bc747ad58](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/3/5311af593eb73322defea68be7818595bf1f8bfd.png)

I'd like to use the XY Chart and the X-axis labels should be non-numeric (i.e. string values, such as "apple", "banana", etc). So, my dataset has columns something like

Fruit | John | Sarah | Michael  
Apple | 1 | 3 | 5  
Banana | 4 | 0 | 2  
Cherry | 2 | 2 | 3

How can i create this? The data is bound to a named query.

To my understanding, I need to primarily work on

- X Axis properties
- Y Axis properties
- Series properties

Seems like I'll need to choose a specific render type. I am new to ignition so not entirely sure. Thanks in advance!

---

<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:** [August 18, 2023, 5:47pm UTC](https://forum.inductiveautomation.com/t/stacked-bar-graph-with-non-numeric-x-axis/78094/2 "2023-08-18T17:47:23Z")

</div>

Experiment with the default XY Chart.

`xAxes.0.render : category`  
`series.0.render : column`  
`series.1.render : column`  
`series.0.yAxis : process temp` (It's already set in the default config.)  
`series.1.yAxis : process temp` (Same as series.0 if you want stack to work.)

Now go and change  
`dataSource.example.0.t_stamp : Apple`  
`dataSource.example.1.t_stamp : Orange`  
`etc.`

Finally, you may find that it's only displaying every second category label. This can be fixed by modifying  
`xAxes.0.appearance.grid.minDistance`  
Try a smaller value.

---

<div class="post-metadata">

**Author:** ![hd2023](https://avatars.discourse-cdn.com/v4/letter/h/f9ae1b/32.png) [@hd2023](https://forum.inductiveautomation.com/u/hd2023)\
**Post date:** [August 18, 2023, 8:02pm UTC](https://forum.inductiveautomation.com/t/stacked-bar-graph-with-non-numeric-x-axis/78094/3 "2023-08-18T20:02:38Z")

</div>

Thanks for the reply. I think i was getting a bit confused because the example/default XY chart used fixed values while I was trying to figure out a binding option.

I was able to figure out the render/axis properties needed, appreciate it!

The grid.minDistance also came in handy for making sure all labels appeared 🙂

---

<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:** [August 18, 2023, 8:04pm UTC](https://forum.inductiveautomation.com/t/stacked-bar-graph-with-non-numeric-x-axis/78094/4 "2023-08-18T20:04:33Z")

</div>

You're welcome. Don't forget to hit the "Solved" link under my answer.