Your search did not match any results.

Chart on Background with Series Template

Documentation

This demo demonstrates the ability of the RangeSelector to display the Chart component with series defined using a series template.

Prev Demo
Next Demo
Backend API
@(Html.DevExtreme().RangeSelector() .ID("range-selector") .Margin(m => m.Top(50)) .Scale(s => s.Label(f => f.Format(Format.Decimal))) .Chart(c => c .CommonSeriesSettings(x => x .ArgumentField("Year") .ValueField("Oil") .Type(SeriesType.Spline) ) .SeriesTemplate(x => x .NameField("Country") .CustomizeSeries(@<text> function(valueFromNameField) { return valueFromNameField === "USA" ? { color: "red" } : {}; } </text>) ) ) .Title("Select a Year Period") .DataSource(Model) )
using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class RangeSelectorController : Controller { public ActionResult ChartOnBackgroundWithSeriesTemplate() { return View(SampleData.OilProductionData.Where(e => new[] { "USA", "Saudi Arabia", "Mexico" }.Contains(e.Country))); } } }
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 readonly IEnumerable<OilProduction> OilProductionData = new[] { new OilProduction { Year = 1970, Country = "Saudi Arabia", Oil = 186.7 }, new OilProduction { Year = 1970, Country = "USA", Oil = 557.8 }, new OilProduction { Year = 1970, Country = "Iran", Oil = 207.3 }, new OilProduction { Year = 1970, Country = "Mexico", Oil = 24.7 }, new OilProduction { Year = 1980, Country = "Saudi Arabia", Oil = 480.4 }, new OilProduction { Year = 1980, Country = "USA", Oil = 423.2 }, new OilProduction { Year = 1980, Country = "Iran", Oil = 74.3 }, new OilProduction { Year = 1980, Country = "Mexico", Oil = 109.2 }, new OilProduction { Year = 1990, Country = "Saudi Arabia", Oil = 319.6 }, new OilProduction { Year = 1990, Country = "USA", Oil = 340.1 }, new OilProduction { Year = 1990, Country = "Iran", Oil = 183.3 }, new OilProduction { Year = 1990, Country = "Mexico", Oil = 145.3 }, new OilProduction { Year = 1990, Country = "Russia", Oil = 499.6 }, new OilProduction { Year = 2000, Country = "Saudi Arabia", Oil = 465 }, new OilProduction { Year = 2000, Country = "USA", Oil = 282.9 }, new OilProduction { Year = 2000, Country = "Iran", Oil = 195.5 }, new OilProduction { Year = 2000, Country = "Mexico", Oil = 148.3 }, new OilProduction { Year = 2000, Country = "Russia", Oil = 375.3 }, new OilProduction { Year = 2008, Country = "Saudi Arabia", Oil = 549.7 }, new OilProduction { Year = 2008, Country = "USA", Oil = 280 }, new OilProduction { Year = 2008, Country = "Iran", Oil = 214.9 }, new OilProduction { Year = 2008, Country = "Mexico", Oil = 132.1 }, new OilProduction { Year = 2008, Country = "Russia", Oil = 503.2 }, new OilProduction { Year = 2009, Country = "Saudi Arabia", Oil = 428.4 }, new OilProduction { Year = 2009, Country = "USA", Oil = 298.9 }, new OilProduction { Year = 2009, Country = "Iran", Oil = 217.2 }, new OilProduction { Year = 2009, Country = "Mexico", Oil = 121.6 }, new OilProduction { Year = 2009, Country = "Russia", Oil = 493.1 } }; } }
#range-selector { height: 310px; }