Hi Hristian Stefanov,

i am using following code to using in my project

 

Child Component which is rendering telerik chart

 <TelerikChart @ref="@ChartRef" Transitions="false">
                <ChartSeriesItems>
                    @*configuring the chart data , color and field *@
                    <ChartSeries Type="ChartSeriesType.Pie"
                                 Data="@pieData"
                                 ColorField="@nameof(MyPieChartModel.SegmentColor)"
                                 Field="@nameof(MyPieChartModel.SegmentValue)"
                                 CategoryField="@nameof(MyPieChartModel.SegmentName)">
                        <ChartSeriesLabels Visible="true"
                                           Template="#=category#"
                                           Background="transparent"
                                           Position="ChartSeriesLabelsPosition.OutsideEnd" />
                    </ChartSeries>
                </ChartSeriesItems>

                <ChartTitle Text="WorkSpaces"></ChartTitle>

                <ChartLegend Visible="false"></ChartLegend>
            </TelerikChart>

 

public class MyPieChartModel
    {
        public string SegmentName { get; set; }
        public double SegmentValue { get; set; }
        public string SegmentColor { get; set; }
    }

    public List<MyPieChartModel> pieData = new List<MyPieChartModel>();

private async Task RebindComponents()
    {
        Log.Debug("Enter into method RebindComponents");
        try
        {
            DmsWorkspaceDto dmsWorkspaceDto = new DmsWorkspaceDto()
            {

            };
            WorkspaceCountAll = //Calling API
            WorkspacePublicCount = //Calling API
            WorkspacePrivateCount =//Calling API

            pieData = new List<MyPieChartModel>()
            {
                new MyPieChartModel
                {
                    SegmentName = "Workspaces All ("+WorkspaceCountAll+")",
                    SegmentValue = WorkspaceCountAll,
                    SegmentColor=Countallcolor
                },

                        new MyPieChartModel
                {
                    SegmentName = "Workspaces Public/View ("+WorkspacePublicCount+")",
                    SegmentValue = WorkspacePublicCount,
                    SegmentColor=Publiccolor
                },
                new MyPieChartModel
                {
                    SegmentName = "Workspaces Private ("+WorkspacePrivateCount+")",
                    SegmentValue = WorkspacePrivateCount,
                    SegmentColor=Privatecolor
                }

            };
            ChartRef.Refresh();
            StateHasChanged();
        }
        catch (Exception ex)
        {
            Log.Error("Problem encountered at:RebindComponents: {message}", ex.Message);
        }
        Log.Debug("Exit from method RebindComponents");
    }                

 

MainLayout.Razor

on button clicks calling following methods to switch pages from light to dark and dark to light

public async Task lightTheme()
    {
       
        string newThemeUrl = "https://cdn.kendostatic.com/themes/7.0.2/bootstrap/bootstrap-main.css";
        await JSRuntime.InvokeVoidAsync("themeChanger.changeCss", new[] { newThemeUrl });
        
    }

    public async Task darkTheme()
    {
        
        string newThemeUrl = "https://cdn.kendostatic.com/themes/7.0.2/bootstrap/bootstrap-main-dark.css";
        await JSRuntime.InvokeVoidAsync("themeChanger.changeCss", new[] { newThemeUrl });
      
    }


var themeChanger = {
            changeCss: function (cssFileUrl) {
                var oldLink = document.getElementById("TelerikThemeLink"); // we have this id on the <link> that references the theme

                if (cssFileUrl === oldLink.getAttribute("href")) {
                    return;
                }

                var newLink = document.createElement("link");
                newLink.setAttribute("id", "TelerikThemeLink");
                newLink.setAttribute("rel", "stylesheet");
                newLink.setAttribute("type", "text/css");
                newLink.setAttribute("href", cssFileUrl);
                newLink.onload = () => {
                    oldLink.parentElement.removeChild(oldLink);
                };

                document.getElementsByTagName("head")[0].appendChild(newLink);
            }
        }