1. Home
  2. Forum
  3. Xamarin.Forms
  4. Set segment width in pixels with StackingColumnSeries

Set segment width in pixels with StackingColumnSeries

Hi, I have been asked to set a fixed segment width for columns in a StackingColumnSeries to 20 pixels. 

Now the Width property works in percentage and the range is 0..1, but this is not the only problem. I have multiple charts inside a listview, each chart has its own StackingColumnSeries with numerical axis whose Maximum is different for each of them, and because the Width property works by percentage and the segment width auto-adapts to the available space given by the maximum, I'm in trouble finding a way to set a fixed width in a data template.

Could you please help? thanks 

1 Reply
MP Michael Prabhu M Syncfusion Team September 11, 2018 07:05 AM UTC

Hi Alessandro, 
 
Sorry for the delay in getting back at this, we have analyzed this and to provide more generic solution we have achieved your requirement by drawing line on series segments using CustomChartRenderer.CS, so here after no need to set marker width for series. It will automatically draw line on each series segment. Please refer CustomChartRenderer.CS for Android,iOS and UWP. 
Please refer blow code snippet. 
Code snippet for Android [C#]:    
public class CustomChartRenderer : SfChartRenderer 
    { 
        protected override void OnElementChanged(ElementChangedEventArgs<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 Native.ChartSeries CreateNativeChartSeries(ChartSeries formSeries) 
        { 
            if (formSeries is StackingColumnSeries) 
            { 
                return new CustomStackingColumSeries(); 
            } 
            return base.CreateNativeChartSeries(formSeries); 
        } 
    } 
    public class CustomStackingColumSeries : Native.StackingColumnSeries 
    {         
        protected override Native.ChartSegment CreateSegment() 
        { 
            return new CustomStackingColumSegment(); 
        } 
    } 
    public class CustomStackingColumSegment : Native.ColumnSegment 
    { 
        RectF rect = new RectF(); 
        Paint paint = new Paint(); 
        public override void OnDraw(Canvas canvas) 
        { 
            canvas.Save(); 
            base.OnDraw(canvas); 
            canvas.Restore(); 
                        
            paint.Color = Android.Graphics.Color.Blue; 
            paint.StrokeWidth = 8 ; 
            paint.SetStyle(Paint.Style.Fill); 
            canvas.Save(); 
            canvas.DrawLine(Left, Top, Right, Top, paint); 
            canvas.Restore(); 
        } 
    } 
Code snippet for iOS [C#]:    
public class CustomChartRenderer : SfChartRenderer 
    { 
        protected override void OnElementChanged(ElementChangedEventArgs<SfChart> e) 
        { 
            base.OnElementChanged(e); 
        } 
        public override Native.SFChart CreateNativeChart() 
        { 
            return new CustomChart(); 
        } 
    } 
    public class CustomChart : Native.SFChart 
    { 
        protected override Native.SFSeries CreateNativeChartSeries(ChartSeries formSeries) 
        { 
            if(formSeries is StackingColumnSeries) 
            { 
                return new CustomStackingColumSeries(); 
            } 
            return base.CreateNativeChartSeries(formSeries); 
        } 
    } 
    public class CustomStackingColumSeries : Native.SFStackingColumnSeries 
    { 
        protected override Native.SFChartSegment CreateSegment() 
        { 
            return new CustomStackingColumSegment(); 
        } 
    } 
    public class CustomStackingColumSegment : Native.SFColumnSegment 
    { 
        public override void DrawSegment(CGContext context) 
        { 
            base.DrawSegment(context); 
            context.SaveState(); 
            UIColor color = UIColor.Blue;              
            context.SetStrokeColor(color.CGColor); 
            context.SetLineWidth(4);            
            context.MoveTo(Left,Top); 
            context.AddLineToPoint(Right, Top); 
            context.ClosePath(); 
            context.DrawPath(CGPathDrawingMode.FillStroke); 
            context.RestoreState(); 
        } 
    } 
Code snippet for UWP :    
[Xaml]:    
<Application.Resources> 
        <ResourceDictionary> 
            <DataTemplate x:Key="template"> 
                <Canvas> 
                    <Border Background="{Binding Interior}" Canvas.Left="{Binding RectX}" Canvas.Top="{Binding RectY}" Width="{Binding Width}" Height="{Binding Height}" BorderThickness="0,5,0,0" BorderBrush="Blue" /> 
                </Canvas> 
            </DataTemplate> 
        </ResourceDictionary> 
</Application.Resources> 
C# 
class CustomChartRenderer : SfChartRenderer 
    { 
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e) 
        { 
            base.OnElementPropertyChanged(sender, e); 
            for (int i = 0;i < Control.Series.Count;i++) 
            { 
                StackingColumnSeries series = Control.Series[i] as StackingColumnSeries; 
                series.CustomTemplate=  App.Current.Resources["template"] as Windows.UI.Xaml.DataTemplate; 
            } 
        } 
    } 
  
Also, we have prepared a sample for this, which can be downloaded from the link below. 
 
Sample: 139676_new 
 
Thanks, 
Michael 



Loader.
Up arrow icon