New to Telerik UI for Xamarin? Download free 30-day trial

Set the width of chart candles


Product Version 2021.3.1110.1
Product Chart for Xamarin Cross-Platform


This article will show you how to apply a width to the iOS Chart CandlesStickSeries.


The native TKChartCandlestickSeries inherits from TKChartOhlcSeries which inherits from TKChartColumnSeries. There are MaxColumnWidth and MinColumnWidth properties inside the TKChartColumnSeries.

Applying a width to the candles can be achieved using these two properties. The solution requires a custom renderer for iOS.

  1. Create a class inside the iOS project for example CustomChartRenderer which inherits from CartesianChartRenderer.

  2. Override the OnElementChanged method and implement the if statement to check whether the series is TKChartCandlestickSeries. Inside the if statement set MaxColumnWidth and MinColumnWidth:

using System.Linq;
using Telerik.XamarinForms.ChartRenderer.iOS;
using TelerikUI;
using TestACV.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(Telerik.XamarinForms.Chart.RadCartesianChart), typeof(CustomChartRenderer))]

namespace TestACV.iOS
    public class CustomChartRenderer : CartesianChartRenderer
        protected override void OnElementChanged(ElementChangedEventArgs<Telerik.XamarinForms.Chart.RadCartesianChart> e)
            if (this.Control != null)
                if (this.Control.Series.FirstOrDefault() is TKChartCandlestickSeries series)
                    series.MaxColumnWidth = 20;
                    series.MinColumnWidth = 15;
In this article