[Bug] markLine symbol covers final datapoint

[isabellachen]

Version

5.3.3

Link to Minimal Reproduction

https://codesandbox.io/p/sandbox/speed-graph-interactive-forked-ntgnvv

Steps to Reproduce

1. Chart is created with React

{
    title: {
      show: true,
      left: "center",
      text: `6 Months LADEN (Kt)  Min: ${min}  Max: ${max}  Avg: ${average}`,
      textStyle: {
        fontSize: 14,
        fontColor: "#5b626b",
        fontWeight: "normal",
        fontFamily: "Source Sans Pro"
      }
    },
    dataset: [
      {
        source: data
      }
    ],
    series: [
      {
        name: "LADEN",
        type: "line",
        encode: {
          x: "pos_date",
          y: "sog",
          tooltip: ["sog"]
        },
        markArea: {
          itemStyle: {
            color: "rgba(100, 0, 177, 0.1)"
          },
          data: [
            [
              {
                name: "NOPAC (NOV 2023 - DEC 2023)",
                xAxis: "2023-11-01"
              },
              {
                xAxis: "2023-12-18"
              }
            ],
            [
              {
                name: "SE Asia (OCT 2023)",
                xAxis: "2023-10-01"
              },
              {
                xAxis: "2023-10-30"
              }
            ],
            [
              {
                name: "Indian O. (DEC 2023 - FEB 2024)",
                xAxis: "2023-12-20"
              },
              {
                xAxis: "2024-02-18"
              }
            ]
          ]
        },
        lineStyle: {
          width: 2
        },
        areaStyle: {
          color: "#001446",
          opacity: 0.35
        },
        symbolSize: 6,
        connectNulls: true
      },
      {
        name: "LADEN AVG",
        type: "line",
        showSymbol: false,
        color: "transparent",
        tooltip: {
          show: false
        },
        markLine: {
          data: [
            {
              name: "average line",
              type: "average"
            },
            {
              name: "test",
              yAxis: 12
            }
          ],
          lineStyle: {
            color: "#001446"
          }
        }
      }
    ],
    grid: {
      zlevel: 0,
      borderWidth: 0,
      backgroundColor: "rgba(0,0,0,0)",
      borderColor: "rgba(0,0,0,0)",
      height: 390,
      right: 35
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#849CDB"
        }
      }
    },
    toolbox: {
      top: "0%",
      feature: {
        saveAsImage: {
          name: "aai-evolution-3m-speed"
        }
      }
    },
    dataZoom: [
      {
        backgroundColor: "#b2b6c3",
        fillerColor: "#001446",
        bottom: 28,
        textStyle: {
          width: 55,
          color: "#333333",
          fontSize: 10
        },
        handleSize: "200%",
        moveHandleStyle: {
          opacity: 0
        },
        type: "slider",
        show: true,
        xAxisIndex: [0],
        // start: 0,
        height: 10,
        selectedDataBackground: {
          lineStyle: {
            color: "rgba(1,1,1,0)"
          },
          areaStyle: {
            color: "rgba(1,1,1,0)"
          }
        },
        dataBackground: {
          lineStyle: {
            color: "rgba(1,1,1,0)"
          },
          areaStyle: {
            color: "rgba(1,1,1,0)"
          }
        }
      }
    ],
    color: ["#001446"],
    xAxis: [
      {
        type: "category",
        splitNumber: 3,
        axisLabel: {
          margin: 6,
          hideOverlap: true
        },
        axisPointer: {
          type: "shadow",
          label: {}
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        nameRotate: 90,
        nameLocation: "middle",
        nameGap: 0,
        nameTextStyle: {
          fontWeight: "normal",
          fontSize: 12
        },
        min: 9,
        max: 15,
        axisLabel: {
          formatter: "{value} Kt",
          margin: 6,
          hideOverlap: true,
          showMinLabel: true
        },
        splitLine: {
          show: false
        }
      }
    ]
  }

Current Behavior

The markLine symbol for average markLine covers the last data point if the average and the last datapoint have the same value.

Expected Behavior

For the markLine symbol to not cover the last datapoint if the values coincide. Better to have the markLine extend beyond the bounds of the x-axis (the dotted line should be a little bit longer) so the arrow symbol does not cover the point.

Environment

- OS: Mac
- Browser: Chrome
- Framework: React

Any additional comments?

No response

[MatthiasMert]

You can specify start and end of the markline yourself as the various examples in the documentation suggest.

Demo

[isabellachen]

Using the example, the markLine disappears

In the original example:

I had two lines, one average line and another set at to a yAxis of 12. I suppose to use the items in the markLine array with item at 0 as start and 1 as end, I would need another markLine to render the line currently at yAxis: 12

However, it is puzzling why the line does not render at all when using the example code

Setting the yAxis to 12 creates 2 lines

[MatthiasMert]

You are missing one set of brackets.

In my example code

[
    {yAxis: 'average', x: '10%', name: 'average'},
    {yAxis: 'average', x: '90%'}
]

specifies a line between two points which have to be encapsulated into '[' brackets.

So the correct syntax is

data: [
    [    // <-- brackets
        {yAxis: 'average', x: '10%', name: 'average'},
        {yAxis: 'average', x: '90%'}
    ]    // <-- bracktes
]

instead of your

data: [
    {yAxis: 'average', x: '10%', name: 'average'},
    {yAxis: 'average', x: '90%'}
]

[isabellachen]

Thank you for spelling it out for me.