# How to add background color between two ranges in xy chart in ignition perspective

**URL:** <https://forum.inductiveautomation.com/t/how-to-add-background-color-between-two-ranges-in-xy-chart-in-ignition-perspective/77137>\
**Category:** General Discussion\
**Tags:** perspective\
**Created:** [July 31, 2023, 1:20pm UTC](https://forum.inductiveautomation.com/t/how-to-add-background-color-between-two-ranges-in-xy-chart-in-ignition-perspective/77137 "2023-07-31T13:20:12Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Senthoor\_Mani\_M](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@Senthoor\_Mani\_M](https://forum.inductiveautomation.com/u/Senthoor_Mani_M)\
**Post date:** [July 31, 2023, 1:20pm UTC](https://forum.inductiveautomation.com/t/how-to-add-background-color-between-two-ranges-in-xy-chart-in-ignition-perspective/77137/1 "2023-07-31T13:20:12Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/9/1920d83b6a3e81b7fd64e021572bd3efe7aea3ce.png)  
above red color series is the minimum and maximum series, now how to add the background color between that two...,

---

<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:** [July 31, 2023, 1:49pm UTC](https://forum.inductiveautomation.com/t/how-to-add-background-color-between-two-ranges-in-xy-chart-in-ignition-perspective/77137/2 "2023-07-31T13:49:20Z")

</div>

Try creating another plot with with the shape you want on it - Y-value = 0 until first bar, Y-value = max for in-band and Y-value = 0 for \> band.

If that's series 1 then set,

```auto
series.1.render : step line
series.1.stepLine.appearance.fill.color : red
series.1.stepLine.appearance.fill.opacity : 0.5

```

You might also need to set,  
`xAxes.0.appearance.grid.position : 0`  
to pull the grid into line.

---

<div class="post-metadata">

**Author:** ![Senthoor\_Mani\_M](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@Senthoor\_Mani\_M](https://forum.inductiveautomation.com/u/Senthoor_Mani_M)\
**Post date:** [August 2, 2023, 6:44am UTC](https://forum.inductiveautomation.com/t/how-to-add-background-color-between-two-ranges-in-xy-chart-in-ignition-perspective/77137/3 "2023-08-02T06:44:44Z")

</div>

Thanks for your reply,  
It's not working for me,

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/e/ee9533360f8140561b1162264e0d1f891daeac0b.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 2, 2023, 9:09am UTC](https://forum.inductiveautomation.com/t/how-to-add-background-color-between-two-ranges-in-xy-chart-in-ignition-perspective/77137/4 "2023-08-02T09:09:26Z")

</div>

Copy the chart from Project Browser and paste the code in here so we can see what's wrong. Format it properly using the \</\> button and, if you like you can use the gear button, hide details to collapse the code to make a neat post.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 2, 2023, 9:26am UTC](https://forum.inductiveautomation.com/t/how-to-add-background-color-between-two-ranges-in-xy-chart-in-ignition-perspective/77137/5 "2023-08-02T09:26:18Z")

</div>

> [@Senthoor\_Mani\_M](#):
>
> add the background color between that two

might be able to do this with a clever constructed liniear-gradient,  
you'll have to play around with the numbers, you can also use % if thats easier than px

```auto
background-image: linear-gradient(to right, rgba(0,0,0,0) 100px, rgba(255,0,0,1) 100px, rgba(255,0,0,1) 400px, rgba(0,0,0,0) 400px, rgba(0,0,0,0));

```

---

<div class="post-metadata">

**Author:** ![Senthoor\_Mani\_M](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@Senthoor\_Mani\_M](https://forum.inductiveautomation.com/u/Senthoor_Mani_M)\
**Post date:** [August 2, 2023, 11:34am UTC](https://forum.inductiveautomation.com/t/how-to-add-background-color-between-two-ranges-in-xy-chart-in-ignition-perspective/77137/6 "2023-08-02T11:34:17Z")

</div>

This is my XY Chart properties,  
[sgg\_solar\_mes\_2023-08-02\_1702\_cpcpk.zip](https://forum.inductiveautomation.com/uploads/short-url/yOroCnnmXGWK8LSXxwt1ZdO5pCa.zip) (29.1 KB)

---

<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 2, 2023, 1:07pm UTC](https://forum.inductiveautomation.com/t/how-to-add-background-color-between-two-ranges-in-xy-chart-in-ignition-perspective/77137/7 "2023-08-02T13:07:33Z")

</div>

You have the same X value for both data points in your range. You need to separate them.

Change `dataSources.data_bc` as shown below:

```auto
[
  {
    "d_bc": 1216,
    "y_bc": 4
  },
  {
    "d_bc": 1217,
    "y_bc": 0
  }
]

```

---

<div class="post-metadata">

**Author:** ![Senthoor\_Mani\_M](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@Senthoor\_Mani\_M](https://forum.inductiveautomation.com/u/Senthoor_Mani_M)\
**Post date:** [August 3, 2023, 4:59am UTC](https://forum.inductiveautomation.com/t/how-to-add-background-color-between-two-ranges-in-xy-chart-in-ignition-perspective/77137/8 "2023-08-03T04:59:38Z")

</div>

Thanks for your reply.  
It's Working.