Range Selector ▸ Embedded Chart (Series Template)

@(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.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using System.Linq;
using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class RangeSelectorController : Controller {

        public ActionResult EmbeddedChartSeriesTemplate() {
            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.MVC.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.MVC.Demos.Models.SampleData {
    public partial class SampleData {
        public static readonly IEnumerable<OilProduction> OilProductionData = new[] {
            new OilProduction { Year = 1970, Country = "Saudi Arabia", Oil = 190 },
            new OilProduction { Year = 1970, Country = "USA", Oil = 530 },
            new OilProduction { Year = 1970, Country = "Mexico", Oil = 25 },
            new OilProduction { Year = 1970, Country = "Canada", Oil = 70 },
            new OilProduction { Year = 1970, Country = "Brazil", Oil = 10 },

            new OilProduction { Year = 1980, Country = "Saudi Arabia", Oil = 480 },
            new OilProduction { Year = 1980, Country = "USA", Oil = 420 },
            new OilProduction { Year = 1980, Country = "Mexico", Oil = 110},
            new OilProduction { Year = 1980, Country = "Canada", Oil = 80 },
            new OilProduction { Year = 1980, Country = "Brazil", Oil = 20 },

            new OilProduction { Year = 1990, Country = "Saudi Arabia", Oil = 330 },
            new OilProduction { Year = 1990, Country = "USA", Oil = 300 },
            new OilProduction { Year = 1990, Country = "Mexico", Oil = 140 },
            new OilProduction { Year = 1990, Country = "Canada", Oil = 95 },
            new OilProduction { Year = 1990, Country = "Brazil", Oil = 35 },

            new OilProduction { Year = 2000, Country = "Saudi Arabia", Oil = 470 },
            new OilProduction { Year = 2000, Country = "USA", Oil = 290 },
            new OilProduction { Year = 2000, Country = "Mexico", Oil = 150 },
            new OilProduction { Year = 2000, Country = "Canada", Oil = 125 },
            new OilProduction { Year = 2000, Country = "Brazil", Oil = 60 },

            new OilProduction { Year = 2010, Country = "Saudi Arabia", Oil = 510 },
            new OilProduction { Year = 2010, Country = "USA", Oil = 350 },
            new OilProduction { Year = 2010, Country = "Mexico", Oil = 140 },
            new OilProduction { Year = 2010, Country = "Canada", Oil = 160 },
            new OilProduction { Year = 2010, Country = "Brazil", Oil = 110 },

            new OilProduction { Year = 2020, Country = "Saudi Arabia", Oil = 520 },
            new OilProduction { Year = 2020, Country = "USA", Oil = 560 },
            new OilProduction { Year = 2020, Country = "Mexico", Oil = 95 },
            new OilProduction { Year = 2020, Country = "Canada", Oil = 240 },
            new OilProduction { Year = 2020, Country = "Brazil", Oil = 160 }
        };
    }
}

#range-selector {
    height: 310px;
}