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

General Discussion
1

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...,

2

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,

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.

3

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

image
image848×910 57 KB

4

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.

5

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

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));
6

This is my XY Chart properties,
sgg_solar_mes_2023-08-02_1702_cpcpk.zip (29.1 KB)

7

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:

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

Thanks for your reply.
It's Working.