# Xy chart line area but vertically

**URL:** <https://forum.inductiveautomation.com/t/xy-chart-line-area-but-vertically/78258>\
**Category:** Ignition\
**Created:** [August 22, 2023, 8:41pm UTC](https://forum.inductiveautomation.com/t/xy-chart-line-area-but-vertically/78258 "2023-08-22T20:41:17Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![hw79](https://avatars.discourse-cdn.com/v4/letter/h/838e76/32.png) [@hw79](https://forum.inductiveautomation.com/u/hw79)\
**Post date:** [August 22, 2023, 8:41pm UTC](https://forum.inductiveautomation.com/t/xy-chart-line-area-but-vertically/78258/1 "2023-08-22T20:41:17Z")

</div>

I have an XY chart with Target and Minimum lines that I would like to use the area between as good. Following the documentation I have series.1.line.open.x and series.2.open.x set to point toward each other but no area shading appears. Has anyone gotten this to work in a vertical band vs. horizontal?

In the example below, I'd like to have the area between the black and red lines shaded.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/3/63faa3dc1274f94a47be3448f12dea92fcda9fa1.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:** [August 22, 2023, 9:24pm UTC](https://forum.inductiveautomation.com/t/xy-chart-line-area-but-vertically/78258/2 "2023-08-22T21:24:06Z")

</div>

I provided some tips to another user trying to do the same thing.

> [@How to add background color between two ranges in xy chart in ignition perspective](https://forum.inductiveautomation.com/t/how-to-add-background-color-between-two-ranges-in-xy-chart-in-ignition-perspective/77137):
>
> Hi All, I am using xy chart, and i create two series minimum and maximum, then i am struck with add the background color between this two series. Thanks. [image] above red color series is the minimum and maximum series, now how to add the background color between that two...,

Basically, you need to create two points on the second series, use a stepline and turn on the fill.

---

<div class="post-metadata">

**Author:** ![hw79](https://avatars.discourse-cdn.com/v4/letter/h/838e76/32.png) [@hw79](https://forum.inductiveautomation.com/u/hw79)\
**Post date:** [August 23, 2023, 1:32pm UTC](https://forum.inductiveautomation.com/t/xy-chart-line-area-but-vertically/78258/3 "2023-08-23T13:32:37Z")

</div>

The documentation shows that series.1 is open to series.2. Are you saying that series.1 needs two points? This information is pulled with a query, I wouldn't begin to know how to add a ghost point.

---

<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 23, 2023, 4:15pm UTC](https://forum.inductiveautomation.com/t/xy-chart-line-area-but-vertically/78258/4 "2023-08-23T16:15:32Z")

</div>

> [@hw79](#):
>
> The documentation shows that series.1 is open to series.2.

I don't know what that means.

Post the results of the binding for your chart. Format it properly using the \</\> button. You may need to switch the binding to return the data in JSON format to be able to do this.

---

<div class="post-metadata">

**Author:** ![hw79](https://avatars.discourse-cdn.com/v4/letter/h/838e76/32.png) [@hw79](https://forum.inductiveautomation.com/u/hw79)\
**Post date:** [August 23, 2023, 4:50pm UTC](https://forum.inductiveautomation.com/t/xy-chart-line-area-but-vertically/78258/5 "2023-08-23T16:50:48Z")

</div>

[XY Chart Example - Line Chart Target Area - Ignition User Manual 8.1 - Ignition Documentation (inductiveautomation.com)](https://docs.inductiveautomation.com/display/DOC81/XY+Chart+Example+-+Line+Chart+Target+Area)

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

In the documentation it shows series.1.line.open.y:[series.2.name] and the opposite for series.2 so the lines are open toward each other. I'm guess that's what creates the shaded area.

---

<div class="post-metadata">

**Author:** ![hw79](https://avatars.discourse-cdn.com/v4/letter/h/838e76/32.png) [@hw79](https://forum.inductiveautomation.com/u/hw79)\
**Post date:** [August 23, 2023, 5:14pm UTC](https://forum.inductiveautomation.com/t/xy-chart-line-area-but-vertically/78258/6 "2023-08-23T17:14:54Z")

</div>

```auto
"#NAMES"
"Total","RoundedActual","LSL","USL","Target","LCL"
"#TYPES"
"I","D","D","D","D","D"
"#ROWS","4"
"0","0.695","0.695","0.84","0.74","0.7"
"6","0.79","0.695","0.84","0.74","0.7"
"5","0.8","0.695","0.84","0.74","0.7"
"1","0.81","0.695","0.84","0.74","0.7"

```

---

<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 23, 2023, 5:39pm UTC](https://forum.inductiveautomation.com/t/xy-chart-line-area-but-vertically/78258/7 "2023-08-23T17:39:45Z")

</div>

The example from the manual is showing a horizontal pass band based on the Y-axis. You're looking for one based on the X-axis.

First we need to understand your data. Where did that come from? It doesn't look like the results of a chart data binding that I've ever seen before!

---

<div class="post-metadata">

**Author:** ![hw79](https://avatars.discourse-cdn.com/v4/letter/h/838e76/32.png) [@hw79](https://forum.inductiveautomation.com/u/hw79)\
**Post date:** [August 23, 2023, 5:52pm UTC](https://forum.inductiveautomation.com/t/xy-chart-line-area-but-vertically/78258/8 "2023-08-23T17:52:14Z")

</div>

I copied the query results from the dataset to the clipboard. Is there a different way to get the info?

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/f/8f50d8372a0a537f918993d13d9c7bf33049113c.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:** [August 23, 2023, 6:44pm UTC](https://forum.inductiveautomation.com/t/xy-chart-line-area-but-vertically/78258/9 "2023-08-23T18:44:06Z")

</div>

I created `dataSources.FDHist` and pasted in your red text above. It was accepted as text rather than a dataset.

Hmmm!

---

<div class="post-metadata">

**Author:** ![hw79](https://avatars.discourse-cdn.com/v4/letter/h/838e76/32.png) [@hw79](https://forum.inductiveautomation.com/u/hw79)\
**Post date:** [August 23, 2023, 8:27pm UTC](https://forum.inductiveautomation.com/t/xy-chart-line-area-but-vertically/78258/10 "2023-08-23T20:27:26Z")

</div>

I don't have any problems with it. How can I convert it to JSON and copy it for you here?

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [August 23, 2023, 8:33pm UTC](https://forum.inductiveautomation.com/t/xy-chart-line-area-but-vertically/78258/11 "2023-08-23T20:33:43Z")

</div>

> [@Transistor](#):
>
> It was accepted as text rather than a dataset.

Perspective doesn't have an automatic way to make a dataset in properties. I use a binding of `unionAll(asList(), asList())` to get a 0x0 dataset, then remove the binding, then open the dataset editor dialog to paste the CSV format.
