echarts icon indicating copy to clipboard operation
echarts copied to clipboard

[Bug] stack for null value with connectNulls: true, the color from the upper values overflows to the bottom.

Open paris0120 opened this issue 3 years ago • 4 comments

Version

ng-echarts 8.0.1

Link to Minimal Reproduction

https://611udm.csb.app/

Steps to Reproduce


import * as echarts from "echarts";
import "./styles.css";

const chart = echarts.init(document.getElementById("app"));

chart.setOption({
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      data: [120, null, 150, 80, 70, 110, 130],
      type: "line",
      connectNulls: true,
      showBackground: true,
      backgroundStyle: {
        color: "rgba(180, 180, 180, 0.2)"
      },
      stack: "test"
    },

    {
      data: [120, null, 150, 80, 70, 110, 130],
      type: "line",
      connectNulls: true,
      areaStyle: {
        color: "red"
      },
      showBackground: true,
      backgroundStyle: {
        color: "rgba(180, 180, 180, 0.2)"
      },
      stack: "test"
    }
  ]
});



### Current Behavior

The area color from the top value overflows to the bottom.

### Expected Behavior

The area color filling stops at the lower value-line for null values

### Environment

```markdown
- OS:
- Browser:
- Framework:

Any additional comments?

No response

paris0120 avatar May 29 '22 04:05 paris0120

I'm also experiencing this issue in [email protected]

Preview of the area not matching the line.

Screenshot 2022-06-13 at 14 09 50

Sandbox: https://codesandbox.io/s/9up7zk?file=/index.js

ZeRego avatar Jun 13 '22 13:06 ZeRego

Also affected by this bug!

hamzahc1 avatar Jun 24 '22 16:06 hamzahc1

Same on 5.2.0

jornetsimon avatar Sep 22 '22 14:09 jornetsimon

We're experiencing the same issue Screenshot 2024-02-06 at 1 44 56 PM

alxnddr avatar Feb 06 '24 18:02 alxnddr