Search results

Scatter Chart

Scatter

Scatter plot or scatter chart plots data with two numeric parameters. To render a scatter series, use series Type as Scatter.

scatter.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Width="60%" DataSource="@SalesReports">
        <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.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>
</EjsChart>

@code{
    public class ChartData
    {
        public string X;
        public double YValue;
        public double YValue1;
    }
    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},
    };
}

Scatter Charts

Customization

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.EJ2.Blazor.Charts

<EjsChart Width="60%" DataSource="@SalesReports">
        <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.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>
</EjsChart>

@code{
    public class ChartData
    {
        public string X;
        public double YValue;
        public double YValue1;
    }
    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},
    };
}

Custom Scatter Charts

See Also