Bind Chart to Dynamic Series

Environment

Product	Telerik UI for ASP.NET Core Chart
Product Version	Created with version 2024.4.1112

Description

How can I bind the Chart to dynamic series?

Example

Razor

    @model TelerikAspNetCoreApp4.Models.MyViewModel
 
    @(Html.Kendo().Chart()
          .Name("Chart")
          .Series(series => {
              foreach (var def in Model.Series) {
                  series.Column(def.Data).Name(def.Name).Stack(def.Stack);
              }
          })
          .CategoryAxis(axis => axis
             .Categories(new string[] { "A", "B", "C" })
          )
    )

Razor

    @addTagHelper *, Kendo.Mvc
    @{ 
        var categories = new string[] { "A", "B", "C" };
    }

    @model TelerikAspNetCoreApp4.Models.MyViewModel
    
    <kendo-chart name="chart">
        <category-axis>
                <category-axis-item name="series-axis">
                    <line visible="false" />
                </category-axis-item>
                <category-axis-item name="label-axis" categories="categories">
                </category-axis-item>
            </category-axis>
        <series>
            @foreach (var def in Model.Series)
            {
                <series-item type="ChartSeriesType.Column"
                             name="@def.Name"
                             stack="@def.Stack"
                             data="@def.Data">
                    <labels background="transparent" visible="true">
                    </labels>
                </series-item>
            }
        </series>
    </kendo-chart>

C#

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            var model = new MyViewModel();
            model.Categories.AddRange(new string[] { "A", "B", "C" });
    
            model.Series.Add(new MySeriesData()
            {
                Name = "Foo",
                Stack = "A",
                Data = new decimal[] { 1, 2, 3 }
            });
    
            model.Series.Add(new MySeriesData()
            {
                Name = "Bar",
                Stack = "A",
                Data = new decimal[] { 2, 3, 4 }
            });
    
            model.Series.Add(new MySeriesData()
            {
                Name = "Baz",
                Stack = "B",
                Data = new decimal[] { 10, 20, 30 }
            });
    
            return View(model);
        }
    }

To see the complete example, refer to the ASP.NET MVC application in the UI for ASP.NET MVC Examples repository. You can use this as a starting point to configure the same setup in an ASP.NET Core project.

More ASP.NET Core Chart Resources

• ASP.NET Core Chart Documentation

• ASP.NET Core Chart Demos

• ASP.NET Core Chart Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Chart for ASP.NET Core

• Server-Side API Reference of the Chart for ASP.NET Core

• Server-Side TagHelper API Reference of the Chart for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base