EmptyPointSettings only work between data points. Is there a way to apply it for the rest of the chart area?

[Amarender Tangella]

I have a date time multiple series chart which shows all the dates and the data for a month. Series A has values from "01-01-2025" to "24-01-2025". Series B has only 3 values. I want to show the same values in between and the rest of the dates. 

Foe example, I have Series B with values = [{ date: "01-01-2025", value: 23},  { date: "11-01-2025", value: 13},  { date: "18-01-2025", value: 3}]. Now, I want the chart to show the same values for the dates that are missing the values. Value: 23 will applicable till "10-01-2025" and value: 13 will be applicable till "17-05-2025" and value: 3 will be applicable till "24-01-2025" or the rest of the month. 

If I have only one value, it will same value till the end of series like a straight line.

I know I can change my dataSource to loop through and assign the same values for the rest of the dates in the code. I want to know if charts has a way to do it. Like the `EmptyPointSettings`. I tried the emptyPointSettings mode `DROP` which works. But, it only works between data points. It won't work after the last value.

[Durga Gopalakrishnan]

Hi Amarender,

Greetings from Syncfusion.

By default, chart data points are plotted only for the provided values. It does not automatically extend the last value to fill missing dates—this is the expected behavior. To display continuous values, you'll need to preprocess the data and fill in the missing dates manually.

In the below sample, we have dynamically added the last point to the second series based on the last point of the first series. This ensures that the second series line extends fully to the end, achieving your expected output. Please refer to the snippet below.

constructor() {

    const lastXInSeries1 = (this.data1[this.data1.length - 1] as any).x;

    const lastPointInSeries2 = this.data2[this.data2.length - 1] as any;

 

    // Only push if last x in data1 is greater than the last x in data2

    if (lastPointInSeries2.x < lastXInSeries1) {

        this.data2.push({

            x: lastXInSeries1,

            y: lastPointInSeries2.y

        });

    }

Sample : https://stackblitz.com/edit/angular-iarrkjkq-apbwj5ie

Please let us know if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Thomas Frank]

@Retro Bowl Syncfusion’s EmptyPointSettings only handles missing data between defined points and cannot extend the last value to the end of the chart’s axis range. To achieve this, you must preprocess the data source to include explicit data points for all dates, duplicating the last value as needed.

[Alize Kirlin]

That's a tricky one! I ran into a similar issue trying to highlight specific regions on a sales chart to show periods of promotional activity. I ended up creating a separate, transparent chart layer with filled shapes to visually represent the empty regions. It's not ideal, but it gave the desired effect. Have you considered something like that? Or, if you're okay with a less "official" look, there's a game called Monkey Mart with a similar aesthetic, maybe looking at how it displays sections could spark an idea!