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.

Comments

Your email address will not be published. Required fields are marked *