Scatter plot or scatter chart plots data with two numeric parameters. To render a scatter series, use series Type
as Scatter
.
@using Syncfusion.Blazor.Charts
<SfChart DataSource="@MedalDetails">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries XName="X" YName="YValue" Type="ChartSeriesType.Scatter">
</ChartSeries>
<ChartSeries XName="X" YName="YValue1" Type="ChartSeriesType.Scatter">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code{
public class ChartData
{
public string X { get; set; }
public double YValue { get; set; }
public double YValue1 { get; set; }
}
public List<ChartData> MedalDetails = 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},
};
}
You can use the following properties to customize the scatter series.
Fill
– used to change the color of the scatter.Opacity
– used to control the transparency of the chart series.Shape
- used to change the shape of the scatter series.@using Syncfusion.Blazor.Charts
<SfChart Width="60%" DataSource="@SalesReports">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries XName="X" YName="YValue" Fill="red" Type="ChartSeriesType.Scatter">
<ChartMarker Visible="false" Width="12" Height="12" Shape="ChartShape.Diamond"></ChartMarker>
</ChartSeries>
<ChartSeries XName="X" YName="YValue1" Fill="blue" Type="ChartSeriesType.Scatter">
<ChartMarker Visible="false" Width="12" Height="12" Shape="ChartShape.Pentagon"></ChartMarker>
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code{
public class ChartData
{
public string X;
public double YValue;
public double YValue1;
}
public List<ChartData> SalesReports = 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},
};
}