feat(Chart): Allow controlling which ChartDataset to add/remove in an existing chart

[carden-jeremy]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

Currently, we can only call chart1.Update(ChartAction.AddDataset); and chart1.Update(ChartAction.RemoveDataset); to add or remove datasets on a chart once it has been created. But, those do not allow you to specify which dataset to add, nor at which index to add it, so the added dataset always appears at the end of the chart's legend. Also, those do not allow you to specify which dataset to remove - it always removes the last item from its legend, even if we wanted to remove a dataset from the middle of the legend.

Describe the solution you'd like

Change chart1.Update(ChartAction.AddDataset); and chart1.Update(ChartAction.RemoveDataset); to something like this, which gives us full control over what is being changed:

chart1.AddDataset(myChartDatasetToAdd, indexToInsertIntoLegend);

chart1.RemoveDataset(datasetLegendLabelToRemoveFromChart);

These actions should update the chart's internal ChartDataSource directly, and should not call OnInitAsync again. "Init" sounds like it should only be called once so it seems wrong that RemoveDataset calls OnInitAsync every time.

Additional context

Here is an example Blazor page to demonstrate the problem with adding/removing datasets in a desired order. It also demonstrates an issue where datasets after number 8 are always colored gray.

@page "/reports/ChartTest"

<Chart ChartType="ChartType.Line" OnInitAsync="OnChartInit" @ref="Chart1" />

<div class="border rounded p-3">
    <div class="fw-semibold mb-2">Commodities</div>

    @foreach (string commodityName in CommodityPrices.Select(x => x.CommodityName).Distinct())
    {
        <div class="form-check">
            <input class="form-check-input"
                   type="checkbox"
                   id="chk_@commodityName)"
                   checked
                   @onchange="(ChangeEventArgs e) => OnCommoditySelectionChangedAsync(commodityName, e)" />

            <label class="form-check-label"
                   for="chk_@commodityName)"
                   title="@commodityName">
                @commodityName
            </label>
        </div>
    }
</div>

@code
{
    private readonly List<CommodityPricesDto> CommodityPrices = new List<CommodityPricesDto>
{
    new CommodityPricesDto { Year = 2021, CommodityName = "Corn", Price = 5.20m },
    new CommodityPricesDto { Year = 2022, CommodityName = "Corn", Price = 6.60m },
    new CommodityPricesDto { Year = 2023, CommodityName = "Corn", Price = 4.90m },
    new CommodityPricesDto { Year = 2024, CommodityName = "Corn", Price = 4.40m },

    new CommodityPricesDto { Year = 2021, CommodityName = "Soy", Price = 13.40m },
    new CommodityPricesDto { Year = 2022, CommodityName = "Soy", Price = 14.20m },
    new CommodityPricesDto { Year = 2023, CommodityName = "Soy", Price = 12.10m },
    new CommodityPricesDto { Year = 2024, CommodityName = "Soy", Price = 11.30m },

    new CommodityPricesDto { Year = 2021, CommodityName = "Wheat", Price = 7.20m },
    new CommodityPricesDto { Year = 2022, CommodityName = "Wheat", Price = 8.50m },
    new CommodityPricesDto { Year = 2023, CommodityName = "Wheat", Price = 6.40m },
    new CommodityPricesDto { Year = 2024, CommodityName = "Wheat", Price = 6.00m },

    new CommodityPricesDto { Year = 2021, CommodityName = "Cotton", Price = 0.92m },
    new CommodityPricesDto { Year = 2022, CommodityName = "Cotton", Price = 1.19m },
    new CommodityPricesDto { Year = 2023, CommodityName = "Cotton", Price = 0.84m },
    new CommodityPricesDto { Year = 2024, CommodityName = "Cotton", Price = 0.79m },

    new CommodityPricesDto { Year = 2021, CommodityName = "Rice", Price = 13.80m },
    new CommodityPricesDto { Year = 2022, CommodityName = "Rice", Price = 16.10m },
    new CommodityPricesDto { Year = 2023, CommodityName = "Rice", Price = 17.30m },
    new CommodityPricesDto { Year = 2024, CommodityName = "Rice", Price = 15.90m },

    new CommodityPricesDto { Year = 2021, CommodityName = "Sorghum", Price = 4.85m },
    new CommodityPricesDto { Year = 2022, CommodityName = "Sorghum", Price = 6.05m },
    new CommodityPricesDto { Year = 2023, CommodityName = "Sorghum", Price = 5.10m },
    new CommodityPricesDto { Year = 2024, CommodityName = "Sorghum", Price = 4.60m },

    new CommodityPricesDto { Year = 2021, CommodityName = "Barley", Price = 5.60m },
    new CommodityPricesDto { Year = 2022, CommodityName = "Barley", Price = 7.10m },
    new CommodityPricesDto { Year = 2023, CommodityName = "Barley", Price = 6.30m },
    new CommodityPricesDto { Year = 2024, CommodityName = "Barley", Price = 5.95m },

    new CommodityPricesDto { Year = 2021, CommodityName = "Oats", Price = 3.55m },
    new CommodityPricesDto { Year = 2022, CommodityName = "Oats", Price = 4.10m },
    new CommodityPricesDto { Year = 2023, CommodityName = "Oats", Price = 3.75m },
    new CommodityPricesDto { Year = 2024, CommodityName = "Oats", Price = 3.40m },

    new CommodityPricesDto { Year = 2021, CommodityName = "Peanuts", Price = 0.23m },
    new CommodityPricesDto { Year = 2022, CommodityName = "Peanuts", Price = 0.25m },
    new CommodityPricesDto { Year = 2023, CommodityName = "Peanuts", Price = 0.24m },
    new CommodityPricesDto { Year = 2024, CommodityName = "Peanuts", Price = 0.26m },

    new CommodityPricesDto { Year = 2021, CommodityName = "Sunflowers", Price = 0.22m },
    new CommodityPricesDto { Year = 2022, CommodityName = "Sunflowers", Price = 0.25m },
    new CommodityPricesDto { Year = 2023, CommodityName = "Sunflowers", Price = 0.24m },
    new CommodityPricesDto { Year = 2024, CommodityName = "Sunflowers", Price = 0.23m },

    new CommodityPricesDto { Year = 2021, CommodityName = "Canola", Price = 0.55m },
    new CommodityPricesDto { Year = 2022, CommodityName = "Canola", Price = 0.63m },
    new CommodityPricesDto { Year = 2023, CommodityName = "Canola", Price = 0.58m },
    new CommodityPricesDto { Year = 2024, CommodityName = "Canola", Price = 0.56m },

    new CommodityPricesDto { Year = 2021, CommodityName = "Sugarbeets", Price = 43.00m },
    new CommodityPricesDto { Year = 2022, CommodityName = "Sugarbeets", Price = 47.50m },
    new CommodityPricesDto { Year = 2023, CommodityName = "Sugarbeets", Price = 45.25m },
    new CommodityPricesDto { Year = 2024, CommodityName = "Sugarbeets", Price = 44.10m }
};

    private Chart Chart1;

    private class CommodityPricesDto
    {
        public int Year;
        public string CommodityName;
        public decimal Price;
    }

    private Task<ChartDataSource> OnChartInit()
    {
        ChartDataSource dataSource = new ChartDataSource();

        dataSource.Options.Title = "Commodity Prices";
        dataSource.Options.X.Title = "Year";
        dataSource.Options.Y.Title = "Price";

        List<int> distinctYears = CommodityPrices
                .Select(x => x.Year)
                .Distinct()
                .OrderBy(x => x)
                .ToList();

        List<string> distinctCommodities = CommodityPrices
                .Select(x => x.CommodityName)
                .Distinct()
                .OrderBy(x => x)
                .ToList();

        dataSource.Labels = distinctYears
            .Select(x => x.ToString())
            .ToList();

        foreach (string commodityName in distinctCommodities)
        {
            List<object> values = CommodityPrices
                .Where(x => x.CommodityName == commodityName)
                .Select(x => (object)x.Price)
                .ToList();

            ChartDataset dataset = new ChartDataset
            {
                Label = commodityName,
                Data = values
            };

            dataSource.Data.Add(dataset);
        }

        return Task.FromResult(dataSource);
    }

    private Task OnCommoditySelectionChangedAsync(String commodityName, ChangeEventArgs e)
    {
        List<decimal> datasetToAddOrRemove = CommodityPrices
                                            .Where(x => String.Equals(x.CommodityName, commodityName, StringComparison.OrdinalIgnoreCase))
                                            .Select(x => x.Price)
                                            .ToList();

        Boolean isChecked = (bool)(e.Value);

        // here, how can I control exactly which commodity gets added or removed from the chart?
        // I can append the correct commodity to the end of the dataset in OnChartInit, which is unintuitive, but that forces it to be added at the end of the chart's legend, even though I might want it added to the middle.
        // But, I can't find any way to remove a specific commodity from the middle of the chart's legend without removing every commodity, one at a time, and re-adding them again, one at a time, which causes every line to replay its animation.
        // A workaround is to update the chart's dataset and then call ChartAction.Refresh, but that causes every line on the chart to replay its animation, which makes it hard to see which new line just got added.
        if (isChecked)
        {
            Chart1.Update(ChartAction.AddDataset);
        }
        else
        {
            Chart1.Update(ChartAction.RemoveDataset);
        }

        return Task.CompletedTask;
    }
}

[bb-auto]

@carden-jeremy Thank you for contacting us. We will give feedback later.

[ArgoZhang]

@carden-jeremy thank you for submit issue

add AddDataset(ChartDataset dataset, int? index = null) Chart instance method

private async Task AddDataset()
{
    var dataset = new ChartDataset()
    {
        BorderWidth = _randomer.Next(1, 5),
        Label = $"Set {DateTime.Now:mmss}",
        Data = Enumerable.Range(1, _lineDataCount).Select((i, index) => (object)_randomer.Next(20, 37)),
        ShowPointStyle = true,
        PointStyle = chartPointStyles[_randomer.Next(0, 9)],
        PointRadius = 5,
        PointHoverRadius = 10
    };
    await _lineChart.AddDataset(dataset, 0);
}

private async Task RemoveDataset()
{
    await _lineChart.RemoveDatasetAt(0);
}

please submit issues if have any questions.

[carden-jeremy]

Thank you for your work on this. I may be making a mistake, but this is not working for me. AddDataset() doesn't cause new legends/lines to appear, and RemoveDataset(0) doesn't remove legends/lines. I included an updated example Blazor page below.

I think it would help if we could remove datasets from the chart by passing the dataset's label rather than requiring us to know the index the dataset is stored at inside the chart. This is because I don't know of a way to programmatically see the chart's internal dataset collection to learn which index we want to remove at. Allowing this would help: Chart1.RemoveDataset("Cotton");.

It may also help if we could read the chart's internal collection of datasets, like this:

var dsCollection = Chart1.Datasets;

int numberOfDatasetsInChart = dsCollection.Count();
int numberOfHiddenDatasetsInChart = dsCollection.Where(ds => ds.Hidden).Count();
ChartDataset firstDatasetInChart = dsCollection.First();

Updated Blazor page that doesn't allow me to add/remove datasets to a line chart:

@page "/reports/ChartTest"
@using System.Diagnostics

<Chart ChartType="ChartType.Line" OnInitAsync="OnChartInit" @ref="Chart1" Height="400px" />

<div class="border rounded p-3">
    <div class="fw-semibold mb-2">Commodities To Show On Chart</div>

    @foreach (string commodityName in GetDistinctCommodities())
    {
        <div class="form-check">
            <input class="form-check-input"
                   type="checkbox"
                   id="chk_@commodityName)"
                   checked="@(CommoditiesToShowByDefault.Contains(commodityName))"
                   @onchange="(ChangeEventArgs e) => OnCommoditySelectionChangedAsync(commodityName, e)" />

            <label class="form-check-label"
                   for="chk_@commodityName)"
                   title="@commodityName">
                @commodityName
            </label>
        </div>
    }
</div>

@code
{
    private readonly List<CommodityPricesDto> CommodityPrices = new List<CommodityPricesDto>
    {
        new CommodityPricesDto { Year = 2021, CommodityName = "Corn", Price = 5.20m },
        new CommodityPricesDto { Year = 2022, CommodityName = "Corn", Price = 6.60m },
        new CommodityPricesDto { Year = 2023, CommodityName = "Corn", Price = 4.90m },
        new CommodityPricesDto { Year = 2024, CommodityName = "Corn", Price = 4.40m },

        new CommodityPricesDto { Year = 2021, CommodityName = "Soy", Price = 13.40m },
        new CommodityPricesDto { Year = 2022, CommodityName = "Soy", Price = 14.20m },
        new CommodityPricesDto { Year = 2023, CommodityName = "Soy", Price = 12.10m },
        new CommodityPricesDto { Year = 2024, CommodityName = "Soy", Price = 11.30m },

        new CommodityPricesDto { Year = 2021, CommodityName = "Wheat", Price = 7.20m },
        new CommodityPricesDto { Year = 2022, CommodityName = "Wheat", Price = 8.50m },
        new CommodityPricesDto { Year = 2023, CommodityName = "Wheat", Price = 6.40m },
        new CommodityPricesDto { Year = 2024, CommodityName = "Wheat", Price = 6.00m },

        new CommodityPricesDto { Year = 2021, CommodityName = "Cotton", Price = 0.92m },
        new CommodityPricesDto { Year = 2022, CommodityName = "Cotton", Price = 1.19m },
        new CommodityPricesDto { Year = 2023, CommodityName = "Cotton", Price = 0.84m },
        new CommodityPricesDto { Year = 2024, CommodityName = "Cotton", Price = 0.79m },

        new CommodityPricesDto { Year = 2021, CommodityName = "Rice", Price = 13.80m },
        new CommodityPricesDto { Year = 2022, CommodityName = "Rice", Price = 16.10m },
        new CommodityPricesDto { Year = 2023, CommodityName = "Rice", Price = 17.30m },
        new CommodityPricesDto { Year = 2024, CommodityName = "Rice", Price = 15.90m },

        new CommodityPricesDto { Year = 2021, CommodityName = "Sorghum", Price = 4.85m },
        new CommodityPricesDto { Year = 2022, CommodityName = "Sorghum", Price = 6.05m },
        new CommodityPricesDto { Year = 2023, CommodityName = "Sorghum", Price = 5.10m },
        new CommodityPricesDto { Year = 2024, CommodityName = "Sorghum", Price = 4.60m },

        new CommodityPricesDto { Year = 2021, CommodityName = "Barley", Price = 5.60m },
        new CommodityPricesDto { Year = 2022, CommodityName = "Barley", Price = 7.10m },
        new CommodityPricesDto { Year = 2023, CommodityName = "Barley", Price = 6.30m },
        new CommodityPricesDto { Year = 2024, CommodityName = "Barley", Price = 5.95m },

        new CommodityPricesDto { Year = 2021, CommodityName = "Oats", Price = 3.55m },
        new CommodityPricesDto { Year = 2022, CommodityName = "Oats", Price = 4.10m },
        new CommodityPricesDto { Year = 2023, CommodityName = "Oats", Price = 3.75m },
        new CommodityPricesDto { Year = 2024, CommodityName = "Oats", Price = 3.40m },

        new CommodityPricesDto { Year = 2021, CommodityName = "Peanuts", Price = 0.23m },
        new CommodityPricesDto { Year = 2022, CommodityName = "Peanuts", Price = 0.25m },
        new CommodityPricesDto { Year = 2023, CommodityName = "Peanuts", Price = 0.24m },
        new CommodityPricesDto { Year = 2024, CommodityName = "Peanuts", Price = 0.26m },

        new CommodityPricesDto { Year = 2021, CommodityName = "Sunflowers", Price = 0.22m },
        new CommodityPricesDto { Year = 2022, CommodityName = "Sunflowers", Price = 0.25m },
        new CommodityPricesDto { Year = 2023, CommodityName = "Sunflowers", Price = 0.24m },
        new CommodityPricesDto { Year = 2024, CommodityName = "Sunflowers", Price = 0.23m },

        new CommodityPricesDto { Year = 2021, CommodityName = "Canola", Price = 0.55m },
        new CommodityPricesDto { Year = 2022, CommodityName = "Canola", Price = 0.63m },
        new CommodityPricesDto { Year = 2023, CommodityName = "Canola", Price = 0.58m },
        new CommodityPricesDto { Year = 2024, CommodityName = "Canola", Price = 0.56m },

        new CommodityPricesDto { Year = 2021, CommodityName = "Sugarbeets", Price = 43.00m },
        new CommodityPricesDto { Year = 2022, CommodityName = "Sugarbeets", Price = 47.50m },
        new CommodityPricesDto { Year = 2023, CommodityName = "Sugarbeets", Price = 45.25m },
        new CommodityPricesDto { Year = 2024, CommodityName = "Sugarbeets", Price = 44.10m }
    };

    private int NumberOfItemsToShowByDefault = 3;

    private List<String> CommoditiesToShowByDefault
    {
        get
        {
            return CommodityPrices.Where(x => GetDistinctCommodities().IndexOf(x.CommodityName) < NumberOfItemsToShowByDefault).Select(x => x.CommodityName).ToList();
        }
    }

    private List<String> GetDistinctCommodities()
    {
        return CommodityPrices
            .Select(x => x.CommodityName)
            .Distinct()
            .OrderBy(x => x)
            .ToList();
    }

    private List<int> GetDistinctYears()
    {
        return CommodityPrices
            .Select(x => x.Year)
            .Distinct()
            .OrderBy(x => x)
            .ToList();
    }

    private Chart Chart1;

    private List<string> Chart1DatasetCopy { get; set; } = new();

    private class CommodityPricesDto
    {
        public int Year;
        public string CommodityName;
        public decimal Price;
    }

    private Task<ChartDataSource> OnChartInit()
    {
        ChartDataSource dataSource = new ChartDataSource();

        dataSource.Options.Title = "Commodity Prices";
        dataSource.Options.X.Title = "Year";
        dataSource.Options.Y.Title = "Price";

        dataSource.Labels = GetDistinctYears().Select(x => x.ToString()).ToList();

        foreach (string commodityName in GetDistinctCommodities().Take(NumberOfItemsToShowByDefault))
        {
            List<object> values = CommodityPrices
                .Where(x => x.CommodityName == commodityName)
                .Select(x => (object)x.Price)
                .ToList();

            ChartDataset dataset = new ChartDataset
            {
                Label = commodityName,
                Data = values
            };

            dataSource.Data.Add(dataset);
            Chart1DatasetCopy.Add(commodityName);
        }

        return Task.FromResult(dataSource);
    }

    private async Task OnCommoditySelectionChangedAsync(String commodityName, ChangeEventArgs e)
    {
        Boolean isChecked = (bool)(e.Value);

        if (isChecked)
        {
            await AddDataset(commodityName);
        }
        else
        {
            await RemoveDataset(commodityName);
        }
    }

    private async Task AddDataset(string commodityName)
    {
        List<object> values = CommodityPrices
                .Where(x => x.CommodityName == commodityName)
                .Select(x => (object)x.Price)
                .ToList();

        var datasetToAdd = new ChartDataset()
        {
            Label = commodityName,
            Data = values,
        };

        
        Debugger.Break();
        // here, the dataset gets added to the chart, but the chart does not draw the new Legend nor new Line.
        await Chart1.AddDataset(datasetToAdd);
        Chart1DatasetCopy.Add(commodityName);

        await Chart1.Update(ChartAction.Update);
    }

    private async Task RemoveDataset(string commodityName)
    {
        int indexOfDatasetToRemove = Chart1DatasetCopy.IndexOf(commodityName);

        Debugger.Break();
        // here, we have to keep track of each item in the chart's list of Datasets so we can know which index to remove at.
        await Chart1.RemoveDatasetAt(indexOfDatasetToRemove);
    }
}

[ArgoZhang]

@carden-jeremy hi thank you for the feedback. This is very meaningful for us to improve our products. could you create a repo. I can submit a PR to fix the problem you're experiencing.

sample code

AddDataset

private async Task AddDataset()
{
    var dataset = new ChartDataset()
    {
        Label = $"Set {DateTime.Now:mmss}",
        Data = Enumerable.Range(1, _lineDataCount).Select((i, index) => (object)_randomer.Next(20, 37))
    };
    await _lineChart.AddDataset(dataset, 0);
}

RemoveDatasetAt

private async Task RemoveDataset()
{
    await _lineChart.RemoveDatasetAt(0);
}

[carden-jeremy]

I created a new demo project, and was able to get these new AddDataset() and RemoveDataset() methods working. There are just 3 ideas that I propose:

1. Since we have to know the index of the dataset when calling RemoveDataset(), it would be helpful if the chart exposed its internal collection of dataset names. I suggest adding a property to the chart that tells us the names and indexes of its datasets so we can use that knowledge when calling RemoveDataset(), like this:

string itemWeWantToRemove = "Pineapple";
List<string> datasetNamesInTheChart = myChart.Datasets; # this is the new property I propose
int indexWeWantToRemove = datasetNamesInTheChart.IndexOf(itemWeWantToRemove);
myChart.RemoveDatasetAt(indexWeWantToRemove );

2. When I call AddDataset() or RemoveDataset(), the "hidden" state of all the chart's datasets reset.

a) Run this demo project, which should display a chart
b) Click one of the legend items in the chart to mark it "hidden"
c) Click one of the checkboxes below the chart to add or remove a dataset in the chart.
d Notice that the legend item you earlier marked hidden is no longer hidden.

3. When I call AddDataset(), the chart runs OnChartInit() again. I don't know why it is necessary for that to happen, but it seems like it should not do that.

I hope you don't mind, I uploaded a zip file of the VS project rather than a GitHub repo: ChartDemo.zip

[ArgoZhang]

@carden-jeremy

hi. well come back.

1. please remove line 229 StateHasChanged (do not need render page again) AddDataset will render chart auto
2. please remove line 231 await Chart1.Update(ChartAction.Update);

private async Task AddDataset(string commodityName)
{
    List<object> values = CommodityPrices
            .Where(x => x.CommodityName == commodityName)
            .Select(x => (object)x.Price)
            .ToList();

    var datasetToAdd = new ChartDataset()
    {
        Label = commodityName,
        Data = values,
    };


    // here, the dataset gets added to the chart, but the chart does not draw the new Legend nor new Line.
    await Chart1.AddDataset(datasetToAdd);
    Chart1DatasetCopy.Add(commodityName);

    // StateHasChanged();

    // await Chart1.Update(ChartAction.Update);
}

1. please remove line 242 StateHasChanged(); RemoveDatasetAt will render chart auto

private async Task RemoveDataset(string commodityName)
{
    int indexOfDatasetToRemove = Chart1DatasetCopy.IndexOf(commodityName);

    // here, we have to keep track of each item in the chart's list of Datasets so we can know which index to remove at.
    Chart1DatasetCopy.RemoveAt(indexOfDatasetToRemove);
    await Chart1.RemoveDatasetAt(indexOfDatasetToRemove);

    // StateHasChanged();
}