Telerik UI for Blazor

@using Telerik.Blazor.Components.Chart
@using Telerik.Blazor

<div style="width:40%; display: inline-block;">
    <TelerikChart>
        <TelerikChartTitle Text="Gross domestic product growth /GDP annual %/"></TelerikChartTitle>
        <TelerikChartLegend Visible="false"></TelerikChartLegend>

        <TelerikChartSeriesItems>
            <TelerikChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series1)"></TelerikChartSeries>
            <TelerikChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series2)"></TelerikChartSeries>
            <TelerikChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series3)"></TelerikChartSeries>
            <TelerikChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series4)"></TelerikChartSeries>
        </TelerikChartSeriesItems>

        <TelerikChartCategoryAxes>
            <TelerikChartCategoryAxis Categories="@Categories"></TelerikChartCategoryAxis>
        </TelerikChartCategoryAxes>
    </TelerikChart>
</div>

<div style="width:50%; display: inline-block; margin-left:10px;">
    <TelerikChart>
        <TelerikChartTitle Text="What is you favourite sport?"></TelerikChartTitle>
        <TelerikChartLegend Visible="true" Position="ChartLegendPosition.Top"></TelerikChartLegend>

        <TelerikChartSeriesItems>
            <TelerikChartSeries Type="ChartSeriesType.Donut" Data="@DataForDonut" Field="@nameof(DonutData.Value)" CategoryField="@nameof(DonutData.Category)">
                <TelerikChartSeriesLabels Position="ChartSeriesLabelsPosition.OutsideEnd"
                                          Visible="true"
                                          Background="transparent"
                                          Template="#= dataItem.Category # - #= percentage*100 #%"></TelerikChartSeriesLabels>
            </TelerikChartSeries>
        </TelerikChartSeriesItems>
    </TelerikChart>
</div>

@functions {
    public class DonutData
    {
        public string Category { get; set; }
        public Int32 Value { get; set; }
    }

    public List<DonutData> DataForDonut = new List<DonutData>()
    {
        new DonutData()
        {
            Category = "Football",
            Value = 35
        },
        new DonutData()
        {
            Category = "Basketball",
            Value = 25
        },
        new DonutData()
        {
            Category = "Volleyball",
            Value = 20
        },
        new DonutData()
        {
            Category = "Rugby",
            Value = 10
        },
        new DonutData()
        {
            Category = "Tennis",
            Value = 10
        }
    };

    public class ModelData
    {
        public double Series1 { get; set; }
        public double Series2 { get; set; }
        public double Series3 { get; set; }
        public double Series4 { get; set; }
    }

    public string[] Categories = new string[] { "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011" };

    public List<ModelData> Data = new List<ModelData>()
    {
        new ModelData()
        {
            Series1 = 3.907,
            Series2 = 4.743,
            Series3 = 0.01,
            Series4 = 1.988
        },
        new ModelData()
        {
            Series1 = 7.943,
            Series2 = 7.295,
            Series3 = 0.375,
            Series4 = 2.733
        },
        new ModelData()
        {
            Series1 = 7.848,
            Series2 = 7.175,
            Series3 = 1.161,
            Series4 = 3.994
        },
        new ModelData()
        {
            Series1 = 9.284,
            Series2 = 6.376,
            Series3 = 0.684,
            Series4 = 3.464
        },
        new ModelData()
        {
            Series1 = 9.263,
            Series2 = 8.153,
            Series3 = 3.7,
            Series4 = 4.001
        },
        new ModelData()
        {
            Series1 = 9.801,
            Series2 = 8.535,
            Series3 = 3.269,
            Series4 = 3.939
        },
        new ModelData()
        {
            Series1 = 3.89,
            Series2 = 5.247,
            Series3 = 1.083,
            Series4 = 1.333
        },
        new ModelData()
        {
            Series1 = 8.238,
            Series2 = 7.832,
            Series3 = 5.127,
            Series4 = 2.245
        },
        new ModelData()
        {
            Series1 = 9.552,
            Series2 = 4.3,
            Series3 = 3.69,
            Series4 = 4.339
        },
        new ModelData()
        {
            Series1 = 6.855,
            Series2 = 4.3,
            Series3 = 2.995,
            Series4 = 2.727
        }
    };
}

@using Telerik.Blazor.Components.Calendar
@using Telerik.Blazor

<TelerikCalendar SelectionMode="@CalendarSelectionMode.Single" Date="@startDate" View="@CalendarView.Year" BottomView="@CalendarView.Year">
</TelerikCalendar>
<TelerikCalendar SelectionMode="@CalendarSelectionMode.Multiple" Date="@startDate">
</TelerikCalendar>

@functions {
    private DateTime startDate = new DateTime(2019, 4, 1);//set the initial date of the calendar
}

@using System.ComponentModel.DataAnnotations
@using Telerik.Blazor.Components.DropDownList

<EditForm Model="@employee" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary></ValidationSummary>

    <TelerikDropDownList Data="@DropDownListData" bind-Value=@SelectedValue Height="40" PopupHeight="170" DefaultItem="@DefaultItem" ValueField="ProductId" TextField="ProductName">
    </TelerikDropDownList>
    <TelerikDropDownList bind-Value="@employee.EmployeeId" Height="40" DefaultItem="@DefaultEmployeeItem" Data="@EmployeeData" ValueField="EmployeeId" TextField="Name">
    </TelerikDropDownList>

    <button class="k-button" type="submit">Submit</button>
</EditForm>

@functions  {
    public IEnumerable<Product> DropDownListData { get; set; }

    public Product DefaultItem { get; set; } = new Product()
    {
        ProductId = 0,
        ProductName = "Select a product..."
    };
    public int SelectedValue { get; set; } = 2;

    IEnumerable<DropDownValidationModel> EmployeeData { get; set; }

    DropDownValidationModel employee { get; set; } = new DropDownValidationModel();

    DropDownValidationModel DefaultEmployeeItem { get; set; } = new DropDownValidationModel()
    {
        Name = "Choose an employee"
    };

    protected override void OnInit()
    {
        DropDownListData = new List<Product>();
        for (int i = 0; i < 5; i++)
        {
            DropDownListData.Add(new Product()
            {
                ProductId = i,
                ProductName = "Product" + i.ToString(),
                SupplierId = i,
                UnitPrice = (decimal)(i * 3.14),
                UnitsInStock = (short)(i * 1),
            });
        }

        EmployeeData = new List<DropDownValidationModel>();
        for (int i = 0; i < 10; i++)
        {
            EmployeeData.Add(new DropDownValidationModel()
            {
                Name = "John " + i.ToString(),
                EmployeeId = i
            });
        }

        base.OnInit();
    }

    class DropDownValidationModel
    {
        [Required(ErrorMessage = "Choose an employee")]
        public int? EmployeeId { get; set; }

        public string Name { get; set; }
    }

    string SuccessMessage = string.Empty;

    void HandleValidSubmit()
    {
        SuccessMessage = "Form Submitted Successfully!";
    }
}