New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Bind Chart to Dynamic Series

Environment

Product	Telerik UI for ASP.NET MVC 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" })
          )
    )
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.

Bind Chart to Dynamic Series

Environment

Description

Example

More ASP.NET MVC Chart Resources

See Also