Range Selector - Customized Chart on Background

This demo illustrates the ability of the RangeSelector to show the Chart with customized settings.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

@(Html.DevExtreme().RangeSelector() .ID("range-selector") .Margin(m => m .Left(15) .Right(15) .Top(50) ) .Scale(s => s .MinorTickInterval(0.5) .TickInterval(1) .Label(l => l.CustomizeText(@<text> function() { return this.valueText + " s"; } </text>)) ) .SliderMarker(s => s.Visible(false)) .Background(b => b.Color("#808080")) .Chart(c => c .Series(s => s .Add().Color("#ffa500").Width(3).Type(SeriesType.Line).ArgumentField("X").ValueField("Y") ) .TopIndent(0.05) .BottomIndent(0.05) ) .Value(new[] { 0, 5.0 }) .Title("Select a Range in the CPU Usage History") .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 CustomizedChartOnBackground() { return View(SampleData.CpuPoints); } } }

using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<object> CpuPoints = new[] { new { X = 0, Y = 15 }, new { X = 1, Y = -1 }, new { X = 2, Y = 10 }, new { X = 3, Y = -3 }, new { X = 4, Y = 16 }, new { X = 5, Y = 0 }, new { X = 6, Y = 9 }, new { X = 7, Y = 3 }, new { X = 8, Y = 15 }, new { X = 9, Y = -1 }, new { X = 10, Y = 10 }, new { X = 11, Y = -3 }, new { X = 12, Y = 16 }, new { X = 13, Y = 0 }, new { X = 14, Y = 9 }, new { X = 15, Y = 3 }, new { X = 16, Y = 13 } }; } }

#range-selector { height: 270px; }