Series Templates

Light

Light Dark Contrast

Documentation

In this example, data for series is provided in a peculiar manner. Each object in the data source represents a point in a single series. To define series in this case, use the seriesTemplate object where you need to specify the data field providing series names and custom settings for a given series. Settings common to all series must be set within the commonSeriesSettings object. Providing data in this manner is useful when the number of points within a single series changes over time.

Prev Demo Next Demo

jQuery

Knockout

AngularJS

Angular

ASP.NET MVC

ASP.NET Core

@(Html.DevExtreme().Chart() .ID("chart") .Palette(VizPalette.Violet) .CommonSeriesSettings(s => s .ArgumentField("Country") .ValueField("Oil") .Type(SeriesType.Bar) ) .SeriesTemplate(t => t .NameField("Year") .CustomizeSeries(@<text> function(valueFromNameField) { return valueFromNameField === 2009 ? { type: "line", label: { visible: true }, color: "#ff3f7a" } : {}; } </text>) ) .Title(t => t .Text("Oil Production") .Subtitle(s => s.Text("(in millions tonnes)")) ) .Export(e => e.Enabled(true)) .Legend(l => l .VerticalAlignment(VerticalEdge.Bottom) .HorizontalAlignment(HorizontalAlignment.Center) ) .DataSource(Model) )

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; using System; using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult SeriesTemplates() { return View(SampleData.OilProductionData); } } }

using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models { public class OilProduction { public int Year { get; set; } public string Country { get; set; } public double Oil { get; set; } } }

using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static List<OilProduction> OilProductionData = new List<OilProduction> { new OilProduction() { Year = 1970, Country = "Saudi Arabia", Oil = 192.2 }, new OilProduction() { Year = 1970, Country = "USA", Oil = 533.5 }, new OilProduction() { Year = 1970, Country = "Iran", Oil = 192.6 }, new OilProduction() { Year = 1970, Country = "Mexico", Oil = 24.2 }, new OilProduction() { Year = 1980, Country = "Saudi Arabia", Oil = 509.8 }, new OilProduction() { Year = 1980, Country = "USA", Oil = 480.2 }, new OilProduction() { Year = 1980, Country = "Iran", Oil = 74.3 }, new OilProduction() { Year = 1980, Country = "Mexico", Oil = 107.2 }, new OilProduction() { Year = 1990, Country = "Saudi Arabia", Oil = 342.6 }, new OilProduction() { Year = 1990, Country = "USA", Oil = 416.6 }, new OilProduction() { Year = 1990, Country = "Iran", Oil = 162.8 }, new OilProduction() { Year = 1990, Country = "Mexico", Oil = 146.3 }, new OilProduction() { Year = 1990, Country = "Russia", Oil = 515.9 }, new OilProduction() { Year = 2000, Country = "Saudi Arabia", Oil = 456.3 }, new OilProduction() { Year = 2000, Country = "USA", Oil = 352.6 }, new OilProduction() { Year = 2000, Country = "Iran", Oil = 191.3 }, new OilProduction() { Year = 2000, Country = "Mexico", Oil = 171.2 }, new OilProduction() { Year = 2000, Country = "Russia", Oil = 323.3 }, new OilProduction() { Year = 2008, Country = "Saudi Arabia", Oil = 515.3 }, new OilProduction() { Year = 2008, Country = "USA", Oil = 304.9 }, new OilProduction() { Year = 2008, Country = "Iran", Oil = 209.9 }, new OilProduction() { Year = 2008, Country = "Mexico", Oil = 157.7 }, new OilProduction() { Year = 2008, Country = "Russia", Oil = 488.5 }, new OilProduction() { Year = 2009, Country = "Saudi Arabia", Oil = 459.5 }, new OilProduction() { Year = 2009, Country = "USA", Oil = 325.3 }, new OilProduction() { Year = 2009, Country = "Iran", Oil = 202.4 }, new OilProduction() { Year = 2009, Country = "Mexico", Oil = 147.5 }, new OilProduction() { Year = 2009, Country = "Russia", Oil = 494.2 } }; } }

#chart { height: 440px; width: 100%; }