Unplanned
Last Updated: 07 Oct 2022 08:49 by Angus
Angus
Created on: 06 Oct 2022 08:36
Category: Chart
Type: Feature Request
1
Chart: Add dashed line series

I would like to use line style instead of colour to distinguish between the different series on my chart as below. 

Is this possible?

From the docs it looks like we can only customise stroke colour and thickness. 

Thanks =)

2 comments
Angus
Posted on: 07 Oct 2022 08:49

Thanks Deyan! 

This should help for my use case because I add the series dynamically in the code behind.

It would be nice if it could be added as a feature so that it could be done automatically, maybe with a LineStyle property in the XAML or something like that.

ADMIN
Deyan
Posted on: 06 Oct 2022 09:33

Hello,

To apply dashed line series, you can add a dashed array to the platform native chart series.

public partial class MainPage : ContentPage
{
	public MainPage()
	{
		InitializeComponent();
		this.chart.HandlerChanged += Chart_HandlerChanged;
	}

	private void Chart_HandlerChanged(object sender, EventArgs e)
	{
		this.UpdateChart();
	}

	private void UpdateChart()
	{
        var a = this.chart.Handler.PlatformView;
#if WINDOWS
        var platformChart = (Telerik.UI.Xaml.Controls.Chart.RadCartesianChart)a;
        var platformSeries = (Telerik.UI.Xaml.Controls.Chart.LineSeries)platformChart.Series[1];
        platformSeries.StrokeDashArray = new Microsoft.UI.Xaml.Media.DoubleCollection { 1, 1, 2, 1 };
#endif
#if ANDROID
		var platformChart = (Com.Telerik.Widget.Chart.Visualization.CartesianChart.RadCartesianChartView)a;
		var platformSeries = (Com.Telerik.Widget.Chart.Visualization.CartesianChart.Series.Categorical.LineSeries)platformChart.Series.Get(1);
		platformSeries.SetDashArray(new float[3] {1, 2, 1});
#endif
	}
}

Regards, Deyan Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.