Q: Does your component support dashed lines in line chart? I would like to have a line that starts as solid but goes on as dashed. Is this possible?
A: It is very easy to create line chart with series that have dashed lines. You only need to set the StrokeDashArray property of the LineSeries. You have all other properties for customizing a dashed line – StrokeDashCap, StrokeDashOffset etc. – you can see them all here. Below is a sample code on how to create a dashed line:
var indexes = new List() { 1, 2, 3, 4 }; LineSeries series2 = new LineSeries(); series2.YDataPath = "AsiaSales"; series2.StrokeDashArray = new DoubleCollection() {4, 2 }; series2.XData = indexes; lineChart1.Series.Add(series2);
As for your second question – we do not support changing the stroke for a given series directly. However, we can suggest you a workaround – you can create two LineSeries that will represent combined the series that you want. The first series will be with solid stroke, the second one will start from the last point of the first line and will be drawn with dashed stroke. Here is the sample code:
LineSeries series3 = new LineSeries(); for (int i = 0; i < salesList.Count / 2; i++) { Sales s = salesList[i]; series3.YData.Add(s.USASales); } series3.XData = new List{ 1, 2 }; lineChart1.Series.Add(series3); LineSeries series4 = new LineSeries(); for (int i = salesList.Count / 2 - 1; i < salesList.Count; i++) { Sales s = salesList[i]; series4.YData.Add(s.USASales); } series4.XData = new List { 2, 3, 4 }; series4.Strokes.Clear(); series4.Strokes.Add(new SolidColorBrush(Colors.Red)); series4.StrokeDashArray = new DoubleCollection() { 4, 2, 7, 1 }; lineChart1.Series.Add(series4);
In the code snippets above we use the following list for a data source:
var salesList = new List() { new Sales(){Category="apples", EuropeSales=34, AsiaSales=12, USASales=24}, new Sales(){Category="oranges", EuropeSales=23, AsiaSales=17, USASales=10}, new Sales(){Category="bananas", EuropeSales=4, AsiaSales=31, USASales=27}, new Sales(){Category="cherries", EuropeSales=8, AsiaSales=9, USASales=30} }; public class Sales : INotifyPropertyChanged { public string Category { get; set; } public double EuropeSales { get; set; } public double AsiaSales { get; set; } public double USASales { get; set; } }