Line Chart Incorrectly Renders for Series with Different Date Ranges

[zaidqureshi95]

Description

I am using ECharts within a React Native application to visualize financial data from two companies (APPL and Lucid) over the past 5 years using a LineStack chart. APPL has data spanning the full 5 years, whereas Lucid, being established in 2023, has data only from 2023 onwards. The expected behavior is for the Lucid line to start from 2023 on the X-axis, aligning with its actual data start date. However, the chart incorrectly renders the LCID line starting from 2019, aligning it with the APPL data start date, despite Lucid not having data for those earlier years.

Expected Behavior

The Lucid line should start from 2023 on the chart, with no line rendered for Lucid before this year, as it does not have data prior to 2023.

Actual Behavior

The Lucid line is rendered starting from 2019 (alongside APPL), incorrectly implying that there is Lucid data from 2019 onwards.

Steps to Reproduce

Integrate ECharts with a React Native application.
Use the following dummy data for APPL and Lucid, representing their financial data over the past 5 years:

const option = {
    tooltip: {
        trigger: 'axis',
    },
    legend: {},
    xAxis: {
        type: 'category',
        data: ['2019', '2020', '2021', '2022', '2023']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'APPL',
            type: 'line',
            data: [820, 932, 901, 934, 1290]
        },
        {
            name: 'Lucid',
            type: 'line',
            // Lucid established in 2023, so no data before then
            data: [0, 0, 0, 0, 500] // Incorrect workaround to illustrate the issue; ideally, these zeros should not be needed for correct rendering.
        }
    ]
};

Render the chart using the above option configuration.

Environment

• ECharts version: 5.5.0
• React Native version:0.69
• Browser and its version Chrome 122.0.6261.94
• Operating System and its version: MacOS 14.0