Scatter chart - custom data view or shape type
3 Replies
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.
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.
SIGN IN To post a reply.
