Syncfusion Feedback


Overview

The ASP.NET Core scatter chart is used to plot data with two numeric parameters. Also referred to as a scatter plot or point chart, its rich feature set includes tooltip, multiple axes, zooming, and panning.


Multiple series scatter plot

Plot multiple scatter series in a single chart to compare different data sets. A legend and tooltip for the series can make it more readable.


Custom marker

Use different types of symbols to display the data points in a scatter plot. This will be useful in differentiating multiple series and points in the same chart.


Data label

Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by a given angle.


Customization

Customize the look and feel of the scatter chart using built-in APIs.


ASP.NET Core Scatter Chart Code Example

Easily get started with ASP.NET Core Scatter using a few simple lines of C# code, as demonstrated below. Also explore our ASP.NET Core Scatter Chart Example that shows you how to render and configure the scatter chart component.

<ejs-chart id="container">
                <e-chart-primaryxaxis valueType="Category">                    
                </e-chart-primaryxaxis>                 
                <e-series-collection>
                    <e-series name="series1" xName="xValue" yName="yValue" dataSource="ViewBag.dataSource"
                              type="@Syncfusion.EJ2.Charts.ChartSeriesType.Scatter">                         
                    </e-series>                     
                </e-series-collection>
 </ejs-chart>
public class HomeController : Controller
{
 public ActionResult Index()
        {  
           List<ChartData> chartData = new List<ChartData>
            {
                new ChartData { xValue = "2014", yValue = 21 },
                new ChartData { xValue = "2015", yValue = 24 },
                new ChartData { xValue = "2016", yValue = 36 },
                new ChartData { xValue = "2017", yValue = 38 },
                new ChartData { xValue = "2018", yValue = 54 },
                new ChartData { xValue = "2019", yValue = 57 },
                new ChartData { xValue = "2020", yValue = 70 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
}
 public class ChartData
        {
            public string xValue;
            public double yValue;       
      }

Learning Resources

UG

Scatter Chart User Guide

Learn the available options to customize ASP.NET Core scatter chart.

API

Scatter Chart API Reference

Explore the ASP.NET Core scatter chart APIs.


90+ ASP.NET CORE UI CONTROLS

Scroll up icon