Rendering Chart after removing datasets

Hi there!

I need to create a chart where i can add / delete data and I stumbled upon a weird reaction, my chart does not remove the datasets from last -> first however it works the other way around. I will be posting my code below and a short recording. I know i used Async task for onInitialized and AddData function althought i do not need them, however i wanted to recreate the functions i would be using in a real environment. https://giphy.com/gifs/chnJNj2QSD1R47aUp9

I guess my question would be, if removing datasets if any order a user would want cannot work, is there a way i can force the chart to rerender at any point?

Thanks in advance!

@using System.Globalization

<style>
    rect.btn {
    padding: 15px 25px;
    text-align: center;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 15px;
    box-shadow: 0 9px #999;
    stroke: #fff;
    fill: #fff;
    fill-opacity: 0;
    stroke-opacity: 0;
    }
</style>

<div class="row">
    <div class="col-md-6 col-sm-12 p-4">
        <label>Smooth <RadzenCheckBox @bind-Value="@smooth" Name="smooth"></RadzenCheckBox></label>
        @if (datasets != null)
        {
            <RadzenChart>
                @foreach (DataItemModel data in datasets)
                {
                    <RadzenLineSeries Smooth="@smooth" Data="@data.DataSet" CategoryProperty="Date" Title="@data.Title" LineType="LineType.Dashed" ValueProperty="Revenue">
                        <RadzenMarkers MarkerType="MarkerType.Circle" />
                    </RadzenLineSeries>

                    <RadzenCategoryAxis Padding="20" FormatString="{0:MMM}" />

                    <RadzenValueAxis Formatter="@FormatAsUSD">
                        <RadzenGridLines Visible="true" />
                        <RadzenAxisTitle Text="Revenue in USD" />
                    </RadzenValueAxis>
                }
            </RadzenChart>
            <div class="chart_dataset_list">

                <div>
                    <ul>
                        @foreach (DataItemModel data in datasets)
                        {
                            <li>
                                <span id="@data.DataUId">
                                    @data.Title
                                    <svg class="" width="24" height="24" viewBox="-3 -4 20 20" xmlns="http://www.w3.org/2000/svg">
                                        <g>
                                            <path d="M8.414 7l5.293-5.293c.391-.391.391-1.023 0-1.414s-1.023-.391-1.414 0l-5.293 5.293-5.293-5.293c-.391-.391-1.023-.391-1.414 0s-.391 1.023 0 1.414l5.293 5.293-5.293 5.293c-.391.391-.391 1.023 0 1.414.195.195.451.293.707.293.256 0 .512-.098.707-.293l5.293-5.293 5.293 5.293c.195.195.451.293.707.293.256 0 .512-.098.707-.293.391-.391.391-1.023 0-1.414l-5.293-5.293"></path>
                                            <rect class="btn" x="0" y="0" width="10" height="10" @onclick='(() => RemoveDataset(data.DataUId))' />
                                        </g>
                                    </svg>
                                </span>
                            </li>
                        }
                    </ul>
                </div>
            </div>
        }

    </div>
</div>
<RadzenButton Click="@AddDataSet" Text="Add" Style="margin-bottom: 20px; width: 90px; margin-left: 10px" />

@code {
        bool smooth = false;
    private List<DataItemModel> datasets = new List<DataItemModel>();
    class DataItem
    {
        public DateTime Date { get; set; }
        public double Revenue { get; set; }
    }
    class DataItemModel
    {
        public string Title { get; set; }
        public int DataUId { get; set; }
        public DataItem[] DataSet { get; set; }
    }

    string FormatAsUSD(object value)
    {
        return ((double)value).ToString("C0", CultureInfo.CreateSpecificCulture("en-US"));
    }

    DataItem[] revenue2019 = new DataItem[] {
        new DataItem
        {
            Date = DateTime.Parse("2019-01-01"),
            Revenue = 234000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-02-01"),
            Revenue = 269000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-03-01"),
            Revenue = 233000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-04-01"),
            Revenue = 244000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-05-01"),
            Revenue = 214000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-06-01"),
            Revenue = 453000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-07-01"),
            Revenue = 274000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-08-01"),
            Revenue = 284000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-09-01"),
            Revenue = 273000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-10-01"),
            Revenue = 282000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-11-01"),
            Revenue = 289000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-12-01"),
            Revenue = 294000
        }
    };
    DataItem[] revenue2020 = new DataItem[] {
        new DataItem
        {
            Date = DateTime.Parse("2019-01-01"),
            Revenue = 334000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-02-01"),
            Revenue = 369000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-03-01"),
            Revenue = 333000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-04-01"),
            Revenue = 344000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-05-01"),
            Revenue = 314000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-06-01"),
            Revenue = 353000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-07-01"),
            Revenue = 374000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-08-01"),
            Revenue = 384000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-09-01"),
            Revenue = 373000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-10-01"),
            Revenue = 382000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-11-01"),
            Revenue = 389000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-12-01"),
            Revenue = 394000
        }
    };
    DataItem[] revenue2021 = new DataItem[] {
        new DataItem
        {
            Date = DateTime.Parse("2019-01-01"),
            Revenue = 334000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-02-01"),
            Revenue = 369000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-03-01"),
            Revenue = 333000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-04-01"),
            Revenue = 144000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-05-01"),
            Revenue = 414000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-06-01"),
            Revenue = 353000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-07-01"),
            Revenue = 374000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-08-01"),
            Revenue = 284000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-09-01"),
            Revenue = 373000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-10-01"),
            Revenue = 382000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-11-01"),
            Revenue = 289000
        },
        new DataItem
        {
            Date = DateTime.Parse("2019-12-01"),
            Revenue = 394000
        }
    };

    protected override async Task OnInitializedAsync()
    {
        datasets.Add(new DataItemModel { Title = "2019", DataUId = 1, DataSet = revenue2019});
        datasets.Add(new DataItemModel { Title = "2020", DataUId = 2, DataSet = revenue2020});
    }

    public async Task AddDataSet()
    {

        datasets.Add(new DataItemModel { Title = "2021", DataUId = 3, DataSet = revenue2021});

    }

      private void RemoveDataset(int dataID)
      {
        datasets.RemoveAll(x => x.DataUId == dataID);
      }
}

Hi @MaxiStefan,

Unfortunately this issue occurs due to a lack of Blazor API that notifies a parent component that a child has been removed. There is an API (well sort of) to notify a parent (RadzenChart in this case) when a child (RadzenLineSeries) is added. The opposite API does not exist.

The workaround is to use the @key special attribute which recreates a component when the value changes. In your example you can use

<RadzenChart @key="@datasets.Count()">

We may have found a way to address that by implementing IDisposable in the series. Should be live with the next version of Radzen.Blazor. You can use @key as a workaround.

Great! Thank you very much for the quick response! It is perfect