How to Customize Scatter Series Shapes in .NET MAUI Cartesian Chart?

The ScatterSeries is a data visualization type in .NET MAUI Cartesian Charts that displays individual data points using markers. Each point’s position is determined by its X and Y values.

The SfCartesianChart in .NET MAUI provides a Type property in ScatterSeries that allows you to change the shape of the scatter points. In this article, we’ll guide you on how to change the shape of scatter points in ScatterSeries using the Type property in .NET MAUI toolkit Cartesian Chart.

List of Supported Shape Values

The Type property supports the following built-in marker shapes.

• Circle
• Cross
• Custom
• Diamond
• Hexogon
• HorizontalLine
• InvertedTriangle
• Pentagon
• Plus
• Rectangle
• Triangle
• VerticalLine

Learn step-by-step instructions and gain insights into customizing scatter series shapes.

Step 1: Configure the Cartesian Chart

Define SfCartesianChart with CategoryAxis for the X-axis and NumericalAxis for the Y-axis. Add ScatterSeries to visualize data points.

XAML

<chart:SfCartesianChart>
......

  <chart:SfCartesianChart.XAxes>
      <chart:NumericalAxis/>
  </chart:SfCartesianChart.XAxes>

  <chart:SfCartesianChart.YAxes>
      <chart:NumericalAxis Interval="1" 
                    Minimum="0" 
                    Maximum="12">
          ......
      </chart:NumericalAxis>
  </chart:SfCartesianChart.YAxes>

  ......

  <chart:ScatterSeries ItemsSource="{Binding Diamonds}"
               XBindingPath="Carat"
               YBindingPath="ClarityGrade"/>

</chart:SfCartesianChart> 

C#

 var xAxes = new NumericalAxis
 {
    .....
 };

 var yAxes = new NumericalAxis
 {
    Interval = 1,
    Minimum = 0,
    Maximum = 12,
    .....
 };

 var scatterSeries = new ScatterSeries
 {
    ItemsSource = viewModel.Diamonds,           
    XBindingPath = "Carat",           
    YBindingPath = "ClarityGrade"           
 };         

 SfCartesianChart cartesianChart = new SfCartesianChart();          
 cartesianChart.XAxes.Add(xAxes);         
 cartesianChart.YAxes.Add(yAxes);          
 cartesianChart.Series.Add(scatterSeries);          

 this.Content = cartesianChart;          

Step 2: Specify the Scatter Shape Using XAML

Use the Type property in ScatterSeries to change the scatter segment shape.

XAML

<chart:ScatterSeries Type = "Diamond"
                    PointHeight="40"
                    PointWidth="40"
                    ......
                    >
</chart:ScatterSeries> 

C#

var scatterSeries = new ScatterSeries
{
     Type = ShapeType.Diamond,
     PointHeight = 40,
     PointWidth = 40,
    .....
}; 

Tips and limitations

• The PointHeight and PointWidth properties control the size of each scatter marker. Adjust these values to improve visibility.
• ScatterSeries does not draw connecting lines between points; it is strictly for individual markers.

Output:

Conclusion

I hope you enjoyed learning how to customize scatter series shapes in .NET MAUI Toolkit Cartesian Chart.

You can refer to our .NET MAUI Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI Toolkit Chart documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!