1. Home
  2. Forum
  3. Xamarin.Forms
  4. Scatter chart - custom data view or shape type

Scatter chart - custom data view or shape type

Hello,

is it possible to create my own custom template for scatter chart data in case I need to display a shape that is not in supported ShapeTypes?


3 Replies 1 reply marked as answer
YP Yuvaraj Palanisamy Syncfusion Team August 31, 2021 08:52 AM UTC

Hi Ondrej Slimak, 

Greetings from Syncfusion. 

Solution 1: 

You can achieve your requirement “Custom template for scatter data” with the help of Datamarker LabelTemplate support in Xamarin.Forms SfChart.   


Solution 2: 

If you want to add the custom drawing for scatter datapoint, you can achieve this by using CustomRenderer in platform specific project. Please find the code example below. 

CodeSnippet: MainPage.xaml 
<local:ChartExt> 

<chart:SfChart.Series> 
    <chart:ScatterSeries x:Name="ChartSeries1"  
                         ItemsSource="{Binding ScatterSeriesData}"  
                         StrokeWidth="1" 
                         ScatterWidth="15" 
                         ScatterHeight="15" 
                         XBindingPath="YValue1"  
                         YBindingPath="YValue2"> 
    </chart:ScatterSeries> 
</chart:SfChart.Series> 

</local:ChartExt> 

public class ChartExt : SfChart 
{ 

} 

Android Project: CustomChartRenderer,cs 
public class CustomChartRenderer : SfChartRenderer 
{ 
    protected override void OnElementChanged(ElementChangedEventArgs<Syncfusion.SfChart.XForms.SfChart> e) 
    { 
        base.OnElementChanged(e); 
    } 

    public override SfChartExt CreateNativeChart() 
    { 
        return new CustomChart(Android.App.Application.Context); 
    } 
} 


public class CustomChart : SfChartExt 
{ 
    public CustomChart(Android.Content.Context context) : base(context) 
    { 

    } 

    protected override Com.Syncfusion.Charts.ChartSeries CreateNativeChartSeries(Syncfusion.SfChart.XForms.ChartSeries formSeries) 
    { 
        if (formSeries is Syncfusion.SfChart.XForms.ScatterSeries) 
        { 
            return new CustomScatterSeries(); 
        } 
        return base.CreateNativeChartSeries(formSeries); 
    } 
} 

public class CustomScatterSeries : Native.ScatterSeries 
{ 
    protected override Native.ChartSegment CreateSegment() 
    { 
        return new CustomLineSegment(); 
    } 
} 

public class CustomLineSegment : Native.ScatterSegment 
{ 
    private readonly float width = 5; 
    Paint paint = new Paint(); 

    public override void OnDraw(Canvas canvas) 
    { 
        var w = this.ScatterWidth; 
        var h = this.ScatterHeight; 
        
        paint.StrokeWidth = this.Series.StrokeWidth; 
        paint.Color = this.Color; 
         
        Path path = new Path(); 
        path.MoveTo(this.CenterX - w, this.CenterY); 
        path.LineTo(this.CenterX - w/4, this.CenterY - h/4); 
        path.LineTo(this.CenterX, this.CenterY - h); 
        path.LineTo(this.CenterX + w / 4, this.CenterY - h / 4); 
        path.LineTo(this.CenterX + w, this.CenterY); 
        path.LineTo(this.CenterX + w / 4, this.CenterY + h / 4); 
        path.LineTo(this.CenterX, this.CenterY + h); 
        path.LineTo(this.CenterX - w / 4, this.CenterY + h / 4); 
        path.LineTo(this.CenterX - w, this.CenterY); 
        path.Close(); 
        canvas.DrawPath(path, paint); 
    } 
} 

Also, we have attached the sample for your reference, please find the sample from the below link. 

Sample: 

Output: 
 

Regards, 
Yuvaraj. 


Marked as answer
OS Ondrej Slimak August 31, 2021 11:30 AM UTC

Data marker seems to be working just fine. Thank you!


YP Yuvaraj Palanisamy Syncfusion Team August 31, 2021 04:17 PM UTC

Hi Ondrej Slimak, 

Greetings from Syncfusion. 

Solution 1: 

You can achieve your requirement “Custom template for scatter data” with the help of Datamarker LabelTemplate support in Xamarin.Forms SfChart.   


Solution 2: 

If you want to add the custom drawing for scatter datapoint, you can achieve this by using CustomRenderer in platform specific project. Please find the code example below. 

CodeSnippet: MainPage.xaml 
<local:ChartExt> 

<chart:SfChart.Series> 
    <chart:ScatterSeries x:Name="ChartSeries1"  
                         ItemsSource="{Binding ScatterSeriesData}"  
                         StrokeWidth="1" 
                         ScatterWidth="15" 
                         ScatterHeight="15" 
                         XBindingPath="YValue1"  
                         YBindingPath="YValue2"> 
    </chart:ScatterSeries> 
</chart:SfChart.Series> 

</local:ChartExt> 
 

public class ChartExt : SfChart 
{ 

} 
 

Android Project: CustomChartRenderer,cs 
public class CustomChartRenderer : SfChartRenderer 
{ 
    protected override void OnElementChanged(ElementChangedEventArgs<Syncfusion.SfChart.XForms.SfChart> e) 
    { 
        base.OnElementChanged(e); 
    } 

    public override SfChartExt CreateNativeChart() 
    { 
        return new CustomChart(Android.App.Application.Context); 
    } 
} 


public class CustomChart : SfChartExt 
{ 
    public CustomChart(Android.Content.Context context) : base(context) 
    { 

    } 

    protected override Com.Syncfusion.Charts.ChartSeries CreateNativeChartSeries(Syncfusion.SfChart.XForms.ChartSeries formSeries) 
    { 
        if (formSeries is Syncfusion.SfChart.XForms.ScatterSeries) 
        { 
            return new CustomScatterSeries(); 
        } 
        return base.CreateNativeChartSeries(formSeries); 
    } 
} 

public class CustomScatterSeries : Native.ScatterSeries 
{ 
    protected override Native.ChartSegment CreateSegment() 
    { 
        return new CustomLineSegment(); 
    } 
} 

public class CustomLineSegment : Native.ScatterSegment 
{ 
    private readonly float width = 5; 
    Paint paint = new Paint(); 

    public override void OnDraw(Canvas canvas) 
    { 
        var w = this.ScatterWidth; 
        var h = this.ScatterHeight; 
        
        paint.StrokeWidth = this.Series.StrokeWidth; 
        paint.Color = this.Color; 
         
        Path path = new Path(); 
        path.MoveTo(this.CenterX - w, this.CenterY); 
        path.LineTo(this.CenterX - w/4, this.CenterY - h/4); 
        path.LineTo(this.CenterX, this.CenterY - h); 
        path.LineTo(this.CenterX + w / 4, this.CenterY - h / 4); 
        path.LineTo(this.CenterX + w, this.CenterY); 
        path.LineTo(this.CenterX + w / 4, this.CenterY + h / 4); 
        path.LineTo(this.CenterX, this.CenterY + h); 
        path.LineTo(this.CenterX - w / 4, this.CenterY + h / 4); 
        path.LineTo(this.CenterX - w, this.CenterY); 
        path.Close(); 
        canvas.DrawPath(path, paint); 
    } 
} 
 

Also, we have attached the sample for your reference, please find the sample from the below link. 

  
Output: 
 

Regards, 
Yuvaraj. 


Loader.
Up arrow icon