Temperature threshold

[r25080]

Hey everyone!
This is a chart I recently made.
The goal is to highlight temperatures above or below the warning thresholds (23°C and 20°C) with a solid red line, and to show all other temperatures with a semi-transparent red line.
However, as shown in the chart, there’s a strange horizontal red line that appears. Why is this happening, and how can I fix it so the line breaks instead of connecting across?

Here is the code:

type: custom:plotly-graph
entities:
  - entity: sensor.wen_shi_du_ji_temperature
    line:
      color: rgba(255, 48, 48, 0.3)
  - entity: sensor.wen_shi_du_ji_temperature
    filters:
      - filter: y > 23
    line:
      color: rgba(255, 48, 48, 1)
    showlegend: false
  - entity: sensor.wen_shi_du_ji_temperature
    filters:
      - filter: y <20 
    line:
      color: rgba(255, 48, 48, 1)
    showlegend: false
layout:
  height: 300
hours_to_show: 30

[r25080]

Finally, I found a solution here: [https://github.com//discussions/507]
Here is the updated code:

type: custom:plotly-graph
entities:
  - entity: sensor.wen_shi_du_ji_temperature
    line:
      color: rgba(255, 48, 48, 0.3)
    showlegend: false
  - entity: sensor.wen_shi_du_ji_temperature
    filters:
      - filter: y>23
      - fn: |-
          ({ xs, ys }) => {
              const resolution = 1000 * 60 * 20; 
              const threshold = resolution * 5; 

              const newXs = [];
              const newYs = [];

              for (let i = 0; i < xs.length - 1; i++) {
                  newXs.push(xs[i]);
                  newYs.push(ys[i]);

                  if (xs[i + 1] - xs[i] > threshold) {
                      const middleX = xs[i] + resolution; 
                      newXs.push(middleX); 
                      newYs.push(null); 
                  }
              }

              newXs.push(xs[xs.length - 1]);
              newYs.push(ys[ys.length - 1]);

              return { xs: newXs, ys: newYs };
          }
    line:
      color: rgba(255, 48, 48, 1)
    showlegend: false
  - entity: sensor.wen_shi_du_ji_temperature
    filters:
      - filter: y <20
    line:
      color: rgba(255, 48, 48, 1)
layout:
  height: 300
hours_to_show: 30

And the resulting chart:

That said, I feel like there might be a simpler(or more intuitive)way to solve this issue. I’d really appreciate any insights or suggestions from those more experienced.