How to change point size of the ScatterPointSeries of RadChart

Environment

Product Version 2019.2.802.1
Product Chart for Xamarin

Description

The The ScatterPointSeries are represented on the chart as not connected data points. You could modify the size of the points displayed in the plot area through custom renderers on Android and iOS.

Solution

  • For Android you would need to set PointSize property of the ScatterPointSeries:
using Android.Content;
using ChartCustomPoints.Droid;
using Telerik.XamarinForms.Chart;
using Telerik.XamarinForms.ChartRenderer.Android;
using Xamarin.Forms.Platform.Android;

[assembly: Xamarin.Forms.ExportRenderer(typeof(Telerik.XamarinForms.Chart.RadCartesianChart), typeof(CustomChartRenderer))]
namespace ChartCustomPoints.Droid
{
    public class CustomChartRenderer : CartesianChartRenderer
    {
        public CustomChartRenderer(Context context) : base(context)
        {

        }
        protected override void OnElementChanged(ElementChangedEventArgs<RadCartesianChart> e)
        {
            base.OnElementChanged(e);
            var series = this.Control.Series.ToArray();
            var scatterSeries = series[0] as Com.Telerik.Widget.Chart.Visualization.CartesianChart.Series.Scatter.ScatterPointSeries;
            scatterSeries.PointSize = 30;
        }

    }
}
  • For iOS you would need to apply PointShape of the Style of the TKChartScatterSeries:
using ChartCustomPoints.iOS;
using System.Drawing;
using Telerik.XamarinForms.Chart;
using Telerik.XamarinForms.ChartRenderer.iOS;
using TelerikUI;
using Xamarin.Forms.Platform.iOS;

[assembly: Xamarin.Forms.ExportRenderer(typeof(Telerik.XamarinForms.Chart.RadCartesianChart), typeof(CustomChartRenderer))]
namespace ChartCustomPoints.iOS
{
    public class CustomChartRenderer : CartesianChartRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<RadCartesianChart> e)
        {
            base.OnElementChanged(e);

            if (this.Control == null) return;

            var series = this.Control.Series;
            var scatterSeries = series[0] as TKChartScatterSeries;

            scatterSeries.Style.PointShape = new TKPredefinedShape(TKShapeType.Circle, new SizeF(30, 30));            
        }
    }
}

See Also

In this article
Not finding the help you need? Improve this article