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;
}