I am creating a Donut Chart and believe I have found a bug. On the initial load of the page, the donut chart element is not playing its animation when the label property "Visible=false". Instead, it pops on with no animation. The animations do play on the drilldown elements on their initial loads, but clicking the refresh chart button also causes this behavior even on drilldown levels. Resetting the drilldown also causes this behavior. The chart legend remains visible during the time when the chart is not. Setting the labels visible property to true causes the animations to play correctly. This proof of concept utilizes static data. The application was created using the telerik templates and is correctly injecting the telerik components as all other telerik components, including other chart components, are functioning as expected. I have isolated the code for the donut chart and posted it here.

 

<TelerikButton OnClick="@(() => DonutChart.Refresh())">Refresh Donut Chart</TelerikButton>
<TelerikButton OnClick="@(() => DonutChart.ResetDrilldownLevel(0))">Reset DrillDown</TelerikButton>
<!-- Donut Chart -->
<TelerikChart @ref="DonutChart">
    <ChartTitle Text="Donut Chart" />
    <ChartLegend Position="Telerik.Blazor.ChartLegendPosition.Right" />
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Donut"
        Data="@donutData"
        Field="@nameof(DonutModel.Number)"
        CategoryField="@nameof(DonutModel.Category)"
        ColorField="@nameof(DonutModel.SegmentColor)"
        DrilldownField="@nameof(DonutModel.DrillDown)">
            <ChartSeriesBorder Color="white" Width="2" />
            <ChartSeriesLabels Position="ChartSeriesLabelsPosition.Above"
            Visible="false"
            Background="transparent">
            </ChartSeriesLabels>
        </ChartSeries>
    </ChartSeriesItems>
</TelerikChart>

@code {
    // Donut Chart
    public TelerikChart DonutChart;

    public class DonutModel
    {
        public string Category { get; set; }
        public int Number { get; set; }
        public string SegmentColor { get; set; }
        public ChartSeriesDescriptor? DrillDown { get; set; }
    }

    public List<DonutModel> donutData = new List<DonutModel>
    {
        new DonutModel
        {
            Category = "Category 1 with Drilldown",
            Number = 263,
            SegmentColor = "#9d3cc7",
            DrillDown = new ChartSeriesDescriptor
            {
                Name = "Drilldowns",
                Type = ChartSeriesType.Donut,
                Field = nameof(DonutModel.Number),
                CategoryField = nameof(DonutModel.Category),
                DrilldownField = nameof(DonutModel.DrillDown),
                Data = new List<DonutModel>()
                {
                    new DonutModel
                    {
                        Category = "Drill Down 1",
                        Number = 102,
                        SegmentColor = "#9d3cc7",
                        DrillDown = new ChartSeriesDescriptor
                        {
                            Name = "People",
                            Type = ChartSeriesType.Donut,
                            Field = nameof(DonutModel.Number),
                            CategoryField = nameof(DonutModel.Category),
                            Data = new List<DonutModel>()
                            {
                                new DonutModel
                                {
                                    Category = "John Doe",
                                    Number = 27,
                                    SegmentColor = "#9d3cc7"
                                },
                                new DonutModel
                                {
                                    Category = "David Smith",
                                    Number = 45,
                                    SegmentColor = "green"
                                },
                                new DonutModel
                                {
                                    Category = "Mary Johnson",
                                    Number = 63,
                                    SegmentColor = "yellow"
                                },
                                new DonutModel
                                {
                                    Category = "Robert Brown",
                                    Number = 56,
                                    SegmentColor = "orange"
                                }
                            }
                        }
                    },
                    new DonutModel
                    {
                        Category = "Drilldown 2",
                        Number = 67,
                        SegmentColor = "green",
                        DrillDown = new ChartSeriesDescriptor
                        {
                            Name = "People",
                            Type = ChartSeriesType.Donut,
                            Field = nameof(DonutModel.Number),
                            CategoryField = nameof(DonutModel.Category),
                            Data = new List<DonutModel>()
                            {
                                new DonutModel
                                {
                                    Category = "John Doe",
                                    Number = 15,
                                    SegmentColor = "#9d3cc7"
                                },
                                new DonutModel
                                {
                                    Category = "David Smith",
                                    Number = 17,
                                    SegmentColor = "green"
                                },
                                new DonutModel
                                {
                                    Category = "Mary Johnson",
                                    Number = 19,
                                    SegmentColor = "yellow"
                                },
                                new DonutModel
                                {
                                    Category = "Robert Brown",
                                    Number = 16,
                                    SegmentColor = "orange"
                                }
                            }
                        }
                    },
                    new DonutModel
                    {
                        Category = "Drilldown 3",
                        Number = 10,
                        SegmentColor = "orange",
                        DrillDown = new ChartSeriesDescriptor
                        {
                            Name = "People",
                            Type = ChartSeriesType.Donut,
                            Field = nameof(DonutModel.Number),
                            CategoryField = nameof(DonutModel.Category),
                            Data = new List<DonutModel>()
                            {
                                new DonutModel
                                {
                                    Category = "John Doe",
                                    Number = 3,
                                    SegmentColor = "#9d3cc7"
                                },
                                new DonutModel
                                {
                                    Category = "David Smith",
                                    Number = 4,
                                    SegmentColor = "green"
                                },
                                new DonutModel
                                {
                                    Category = "Mary Johnson",
                                    Number = 1,
                                    SegmentColor = "yellow"
                                },
                                new DonutModel
                                {
                                    Category = "Robert Brown",
                                    Number = 2,
                                    SegmentColor = "orange"
                                }
                            }
                        }
                    }
                }
            }
        },
        new DonutModel
        {
            Category = "Category 2 with no Drilldown",
            Number = 31,
            SegmentColor = "#fab933"
        }
    };