What is required for adding charts to a page dynamically?

[CaiusJard]

All the examples in the doc use a "hard coded chart" but I wondered if it was possible to create them based on a collection. I'm also trying to get the charts going based on time on the X and a value on the Y

For example I have this razor:

<table class="table">
    <thead>
        <tr>
            <th>Chart</th>
        </tr>
    </thead>
    <tbody>
        @{
            foreach (var item in Model.SomeChartDatas)
            {
                <tr>
                    @{
                        var chart = new LineChart<(DateTime X, double Y)>();
                        _allCharts.Add(chart, item.ToList()); //item is an array of tuple (X,Y)
                        <td><LineChart @ref="chart" TItem="(DateTime X, double Y)" /></td>
                    }
                </tr>
            }
            _chartsReadyForDraw = true;
        }
    </tbody>
</table>


@code {

    class MyModel { public bool IsReady { get; set; } public (DateTime, double)[][] SomeChartDatas { get; set; } }

    MyModel Model = new MyModel()
    {
        SomeChartDatas = new[] { new[] { (DateTime.Now, 10d), (DateTime.Now.AddMinutes(1), 20d) }, new[] { (DateTime.Now, 50d), (DateTime.Now.AddMinutes(1), 30d) } }
    };

    Dictionary<LineChart<(DateTime X, double Y)>, List<(DateTime X, double Y)>> _allCharts = new Dictionary<LineChart<(DateTime X, double Y)>, List<(DateTime X, double Y)>>();
    bool _chartsReadyForDraw = false;


    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        base.OnAfterRender(firstRender);

        if (_chartsReadyForDraw)
        {
            _chartsReadyForDraw = false;

            foreach (var kvp in _allCharts)
            {
                var chart = kvp.Key;
                var data = kvp.Value;

                await chart.Clear();

                await chart.AddDatasetsAndUpdate(new LineChartDataset<(DateTime X, double Y)> { Data = data, });
            }

            _allCharts.Clear();
        }
    }
}

It's a much stripped down verison of the actual page but it exhibits the same.. I have an array of arrays of chart data, and this page is supposed to draw a table of one column with two charts in. The two charts do appear on the page, but they are completely empty - the Y axis runs from -1 to +1 and the X is totally unlabeled

As the razor is looping and making charts it builds a dictionary mapping charts and data and I iterate this in the post render and trigger the drawing - I think this is essentially the same as what the charts in the documentation do - to have a mechanism in the @code that only draws once. (I do find that I get multiple renders happening but I'm not sure it's causing the empty charts problem).

I'm not sure if what I do in the html part of the page(where the chart is added to the markup, is actually sane) - but I can't find anything to compare it against that isn't e.g. ref="someHardCodedSingleField" and I don't know if these things are supposed to have unique refs, or unique ids etc

[stsrki]

I'm really not sure if it will work creating it dynamically.

Maybe add a key attribute so that Blazor does not recreate them every loop.

<LineChart @key="@item" @ref="chart" TItem="(DateTime X, double Y)" />