Scatter in ASP.NET CORE Charts Component

17 Apr 20238 minutes to read

Scatter

To render a scatter series, use series Type as Scatter.

<ejs-chart id="container" width="60%" load="window.onload">
    <e-series-collection>
        <e-series xName="x" yName="y" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Scatter"></e-series>
        <e-series xName="x" yName="y" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Scatter"></e-series>
    </e-series-collection>
</ejs-chart>
</div>
<script>
    window.onload = function (args) {
        var series1 = [];
        var series2 = [];
        var point1;
        var value = 80;
        var value1 = 70;
        var i;
        for (i = 1; i < 50; i++) {
            if (Math.random() > 0.5) {
                value += Math.random();
            }
            else {
                value -= Math.random();
            }
            value = value < 60 ? 60 : value > 90 ? 90 : value;
            point1 = { x: 120 + (i / 2), y: value.toFixed(1) };
            series1.push(point1);
        }
        for (i = 1; i < 50; i++) {
            if (Math.random() > 0.5) {
                value1 += Math.random();
            }
            else {
                value1 -= Math.random();
            }
            value1 = value1 < 60 ? 60 : value1 > 90 ? 90 : value1;
            point1 = { x: 120 + (i / 2), y: value1.toFixed(1) };
            series2.push(point1);
        }
        args.chart.series[0].dataSource = series1;
        args.chart.series[1].dataSource = series2;
    }
</script>
public IActionResult Index(){
         return View();
}

Series customization

The following properties can be used to customize the Scatter series.

  • Fill – Specifies the color of the series.
  • Opacity – Specifies the opacity of Fill.
  • Shape – Specifies the shape of the scatter series.
<ejs-chart id="container">
    <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" fill="blue" opacity="0.5"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar">
            <e-series-marker visible="false" height="10" width="10"
                shape="@Syncfusion.EJ2.Charts.ChartShape.Circle"></e-series-marker>
        </e-series>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue1" fill="red" opacity="0.5"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar">
            <e-series-marker visible="false" height="10" width="10"
                shape="@Syncfusion.EJ2.Charts.ChartShape.Diamond"></e-series-marker>
        </e-series>
    </e-series-collection>
</ejs-chart>
public ActionResult Index()
        {
            List<ChartData> chartData = new List<ChartData>
            {
                new ChartData { x= "USA", yValue= 46, yValue1=56 },
                new ChartData { x= "GBR", yValue= 27, yValue1=17 },
                new ChartData { x= "CHN", yValue= 26, yValue1=36 },
                new ChartData { x= "UK", yValue= 56,  yValue1=16 },
                new ChartData { x= "AUS", yValue= 12, yValue1=46 },
                new ChartData { x= "IND", yValue= 26, yValue1=16 },
                new ChartData { x= "DEN", yValue= 26, yValue1=12 },
                new ChartData { x= "MEX", yValue= 34, yValue1=32},
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ChartData
        {
            public string x;
            public double yValue;
            public double yValue1;
        }

See Also