# How to generate horizontal xy chart

**URL:** <https://forum.inductiveautomation.com/t/how-to-generate-horizontal-xy-chart/110149>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [August 25, 2025, 5:00pm UTC](https://forum.inductiveautomation.com/t/how-to-generate-horizontal-xy-chart/110149 "2025-08-25T17:00:04Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![olivia.sanchez](https://avatars.discourse-cdn.com/v4/letter/o/ec9cab/32.png) [@olivia.sanchez](https://forum.inductiveautomation.com/u/olivia.sanchez)\
**Post date:** [August 25, 2025, 5:00pm UTC](https://forum.inductiveautomation.com/t/how-to-generate-horizontal-xy-chart/110149/1 "2025-08-25T17:00:04Z")

</div>

I want to replicate the horizontal color bar chart based on this data table. The data table shows when each color was activated, and each color has a number assigned (lime=1, blue=2, yellow=3, etc.). Can I do this in an XY Chart?

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

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

---

<div class="post-metadata">

**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\
**Post date:** [August 25, 2025, 5:07pm UTC](https://forum.inductiveautomation.com/t/how-to-generate-horizontal-xy-chart/110149/2 "2025-08-25T17:07:37Z")

</div>

I don’t think so. I would create a single view with a parameter number indicating what color its background should be (so just a small rectangle representing a single slice). Then create a view representing one vertical slice that is a row repeater of the values in that slice. The overall view would then be a horizontal repeater of the vertical slice view.

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [August 25, 2025, 9:29pm UTC](https://forum.inductiveautomation.com/t/how-to-generate-horizontal-xy-chart/110149/3 "2025-08-25T21:29:22Z")

</div>

You'll have to do some processing to your data, but you can make these types of charts using the XY Chart component. See my Ribbon Chart exchange resource for inspiration:

> **[Ignition Exchange](https://inductiveautomation.com/exchange/1514/overview)**
>
> Discover, share, and download community made Ignition resources in collaboration with your organization or the Ignition community.

---

<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 25, 2025, 9:46pm UTC](https://forum.inductiveautomation.com/t/how-to-generate-horizontal-xy-chart/110149/4 "2025-08-25T21:46:00Z")

</div>

Play around with this idea:

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

1. Each plot will need its own y-axis.
2. Pick your column from the dataset.
3. Set the line color to transparent.
4. Set `interpolation : curveStepAfter`.
5. Set `type : area`.

Repeat for each ribbon. (Actually, get the first one right and then right-click, duplicate and edit.)

The trick of this is the combination of curveStepAfter, area type and no stroke results in blocks on the ribbon.

Have fun.