Based on the instructions here: https://docs.telerik.com/devtools/universal-windows-platform/controls/radchart/cartesianchart/series/categorical-series/categorical-lineseries
Simple Example
In the .xaml file
Add this to the start with the other xmlns lines:
xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart"
Add this where you want your chart:
<!-- CHART -->
<telerikChart:RadCartesianChart x:Name="lineSeries" PaletteName="DefaultLight">
<telerikChart:RadCartesianChart.VerticalAxis>
<telerikChart:LinearAxis/>
</telerikChart:RadCartesianChart.VerticalAxis>
<telerikChart:RadCartesianChart.HorizontalAxis>
<telerikChart:CategoricalAxis/>
</telerikChart:RadCartesianChart.HorizontalAxis>
<telerikChart:LineSeries ItemsSource="{Binding}">
<telerikChart:LineSeries.CategoryBinding>
<telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
</telerikChart:LineSeries.CategoryBinding>
<telerikChart:LineSeries.ValueBinding>
<telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
</telerikChart:LineSeries.ValueBinding>
</telerikChart:LineSeries>
</telerikChart:RadCartesianChart>
In the .cs file
using Telerik.UI.Xaml.Controls.Chart;
public class ChartData
{
public string Category { get; set; }
public double Value { get; set; }
}
In your function:
//----- SET CHART DATA -----
List<ChartData> data = new List<ChartData>();
data.Add(new ChartData() { Category = "Apples", Value = 5 });
data.Add(new ChartData() { Category = "Oranges", Value = 9 });
data.Add(new ChartData() { Category = "Pineaples", Value = 8 });
this.lineSeries.DataContext = data;
Example With Custom Colours For Each Line
In the .xaml file
Add this to the start with the other xmlns lines:
xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart"
Add this where you want your chart:
<!-- THE CHART -->
<telerikChart:RadCartesianChart Canvas.Left="10" Canvas.Top="510" Width="780" Height="410" x:Name="Chart1" >
<telerikChart:RadCartesianChart.HorizontalAxis>
<telerikChart:CategoricalAxis />
</telerikChart:RadCartesianChart.HorizontalAxis>
<telerikChart:RadCartesianChart.VerticalAxis>
<telerikChart:LinearAxis />
</telerikChart:RadCartesianChart.VerticalAxis>
<telerikChart:RadCartesianChart.SeriesProvider>
<telerikChart:ChartSeriesProvider Source="{Binding}" >
<telerikChart:ChartSeriesProvider.SeriesDescriptors>
<!-- Chart Line 0 -->
<telerikChart:CategoricalSeriesDescriptor CategoryPath="ValueX"
ValuePath="ValueY"
ItemsSourcePath="Items"
CollectionIndex="0">
<telerikChart:CategoricalSeriesDescriptor.Style >
<Style TargetType="telerikChart:LineSeries" >
<Setter Property="StrokeThickness" Value="2" />
<Setter Property="Stroke" Value="#F48267" />
</Style>
</telerikChart:CategoricalSeriesDescriptor.Style>
</telerikChart:CategoricalSeriesDescriptor>
<!-- Chart Line 1 -->
<telerikChart:CategoricalSeriesDescriptor CategoryPath="ValueX"
ValuePath="ValueY"
ItemsSourcePath="Items"
CollectionIndex="1">
<telerikChart:CategoricalSeriesDescriptor.Style >
<Style TargetType="telerikChart:LineSeries" >
<Setter Property="StrokeThickness" Value="2" />
<Setter Property="Stroke" Value="#18E600" />
</Style>
</telerikChart:CategoricalSeriesDescriptor.Style>
</telerikChart:CategoricalSeriesDescriptor>
<!-- Chart Line 2 -->
<telerikChart:CategoricalSeriesDescriptor CategoryPath="ValueX"
ValuePath="ValueY"
ItemsSourcePath="Items"
CollectionIndex="2">
<telerikChart:CategoricalSeriesDescriptor.Style >
<Style TargetType="telerikChart:LineSeries" >
<Setter Property="StrokeThickness" Value="2" />
<Setter Property="Stroke" Value="#64F4FF" />
</Style>
</telerikChart:CategoricalSeriesDescriptor.Style>
</telerikChart:CategoricalSeriesDescriptor>
<!-- Chart Line 3 -->
<telerikChart:CategoricalSeriesDescriptor CategoryPath="ValueX"
ValuePath="ValueY"
ItemsSourcePath="Items"
CollectionIndex="3">
<telerikChart:CategoricalSeriesDescriptor.Style >
<Style TargetType="telerikChart:LineSeries" >
<Setter Property="StrokeThickness" Value="2" />
<Setter Property="Stroke" Value="#F4FF67" />
</Style>
</telerikChart:CategoricalSeriesDescriptor.Style>
</telerikChart:CategoricalSeriesDescriptor>
<!-- Chart Line 4 -->
<telerikChart:CategoricalSeriesDescriptor CategoryPath="ValueX"
ValuePath="ValueY"
ItemsSourcePath="Items"
CollectionIndex="4">
<telerikChart:CategoricalSeriesDescriptor.Style >
<Style TargetType="telerikChart:LineSeries" >
<Setter Property="StrokeThickness" Value="2" />
<Setter Property="Stroke" Value="#DF00F6" />
</Style>
</telerikChart:CategoricalSeriesDescriptor.Style>
</telerikChart:CategoricalSeriesDescriptor>
<!-- Chart Line 5 -->
<telerikChart:CategoricalSeriesDescriptor CategoryPath="ValueX"
ValuePath="ValueY"
ItemsSourcePath="Items"
CollectionIndex="5">
<telerikChart:CategoricalSeriesDescriptor.Style >
<Style TargetType="telerikChart:LineSeries" >
<Setter Property="StrokeThickness" Value="2" />
<Setter Property="Stroke" Value="#F48267" />
</Style>
</telerikChart:CategoricalSeriesDescriptor.Style>
</telerikChart:CategoricalSeriesDescriptor>
<!-- Chart Line 6 -->
<telerikChart:CategoricalSeriesDescriptor CategoryPath="ValueX"
ValuePath="ValueY"
ItemsSourcePath="Items"
CollectionIndex="6">
<telerikChart:CategoricalSeriesDescriptor.Style >
<Style TargetType="telerikChart:LineSeries" >
<Setter Property="StrokeThickness" Value="2" />
<Setter Property="Stroke" Value="#5E007A" />
</Style>
</telerikChart:CategoricalSeriesDescriptor.Style>
</telerikChart:CategoricalSeriesDescriptor>
<!-- Chart Line 7 -->
<telerikChart:CategoricalSeriesDescriptor CategoryPath="ValueX"
ValuePath="ValueY"
ItemsSourcePath="Items"
CollectionIndex="7">
<telerikChart:CategoricalSeriesDescriptor.Style >
<Style TargetType="telerikChart:LineSeries" >
<Setter Property="StrokeThickness" Value="2" />
<Setter Property="Stroke" Value="#1BACFF" />
</Style>
</telerikChart:CategoricalSeriesDescriptor.Style>
</telerikChart:CategoricalSeriesDescriptor>
</telerikChart:ChartSeriesProvider.SeriesDescriptors>
</telerikChart:ChartSeriesProvider>
</telerikChart:RadCartesianChart.SeriesProvider>
</telerikChart:RadCartesianChart>
Setting Properties
Setting Axis Names
this.Chart1.VerticalAxis.Title = "My Y Axis";
this.Chart1.HorizontalAxis.Title = "Hour";
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.