Charts - Scatter

Scatter charts can be used whenever you need to allow the user to draw their own conclusions about information displayed within the chart.

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().Chart() .ID("chart") .CommonSeriesSettings(s => s.Type(SeriesType.Scatter)) .Series(s => { s.Add().ArgumentField("X1").ValueField("Y1"); s.Add().ArgumentField("X2").ValueField("Y2").Point(p => p .Symbol(PointSymbol.TriangleDown) ); }) .ArgumentAxis(a => a .Grid(g => g.Visible(true)) .TickInterval(5) .MinorGrid(g => g.Visible(true)) ) .ValueAxis(a => a.Add().TickInterval(50)) .Legend(l => l.Visible(false)) .CommonPaneSettings(s => s.Border(b => b.Visible(true))) .DataSource(Model) )

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

using System; using System.Collections.Generic; using DevExpress.Data.Utils; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static IEnumerable<object> GetScatterData() { var rnd = NonCryptographicRandom.System; double b1 = rnd.Next(-100, 100) / 10; double b2 = rnd.Next(-100, 100) / 10; double k1 = rnd.Next(-100, 100) / 10; double k2 = rnd.Next(-100, 100) / 10; if(k1 < 0.1 && k1 >= 0) k1 = 0.1; if(k1 > -0.1 && k1 < 0) k1 = -0.1; if(k2 < 0.1 && k2 >= 0) k2 = 0.1; if(k2 > -0.1 && k2 < 0) k2 = -0.1; double deviation1 = Math.Round(k1 * 8); double deviation2 = Math.Round(k2 * 8); for(int i = 0; i < 30; i++) { var isNegativeDelta = rnd.Next(0, 1) == 0; double delta1 = deviation1 * rnd.NextDouble(); double delta2 = deviation2 * rnd.NextDouble(); if(isNegativeDelta) { delta1 = -delta1; delta2 = -delta2; } double x1 = rnd.Next(1, 20); double x2 = rnd.Next(1, 20); double y1 = k1 * x1 + b1 + delta1; double y2 = k2 * x2 + b2 + delta2; yield return new { X1 = x1, Y1 = y1, X2 = x2, Y2 = y2 }; } } } }

#chart { height: 440px; }