Binding of LineSeries.DefaultVisualStyle Properties

[Mario]

Hi Team,

In my LineSeries chart I want to change the color of the line dots based on a property of my bound list item.

The ItemSource of my LineSeries is an ObservableCollection<MonthlyTracking> . The MonthlyTracking class looks like this:

   public class MonthlyTracking : INotifyPropertyChanged
    {
        [....]

        private string monthString;
        public string MonthString
        {
            get => this.monthString;
            set
            {
                this.monthString = value;
                this.OnPropertyChanged(nameof(this.MonthString));
            }
        }

        private double actualValue;
        public double ActualValue
        {
            get => this.actualValue;
            set
            {
                this.actualValue = value;
               this.OnPropertyChanged(nameof(this.ActualValue));
            }
        }

        private int statusId;
        public int StatusId
        {
            get => this.statusId;
            set
            {
                this.statusId = value;
                this.OnPropertyChanged(nameof(this.StatusId));
            }
        }

     [....]

    }

My XAML Code looks like this:

<telerik:RadCartesianChart>
     <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis ShowLabels="True"/>
     </telerik:RadCartesianChart.HorizontalAxis>
	 
     <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis />
    </telerik:RadCartesianChart.VerticalAxis>
                
	<telerik:RadCartesianChart.Series>                   
         <telerik:LineSeries ItemsSource="{Binding MonthlyTrackingList}" CategoryBinding="MonthString" ValueBinding="ActualValue" >
             <telerik:LineSeries.DefaultVisualStyle>
                <Style TargetType="Path">
                    <Setter Property="Width" Value="10" />
                    <Setter Property="Height" Value="10" />     
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding StatusId}" Value="1">
                            <Setter Property="Fill" Value="LimeGreen" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding StatusId}" Value="2">
                            <Setter Property="Fill" Value="LightCoral" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </telerik:LineSeries.DefaultVisualStyle>
         </telerik:LineSeries>
    </telerik:RadCartesianChart.Series>
	
</telerik:RadCartesianChart>

The line is drawn in the chart. Unfortunately my binding in telerik:LineSeries.DefaultVisualStyle is wrong. The property StatusId is not found. Can you help me?

 

Kind regards,

 

Mario

 

[Dimitar]

Hi Mario,

I have tested this and indeed it can be a little tricky with the line series. You need to set the binding like this in order for this to work properly: 

<Style.Triggers>
    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag.DataItem.StatusId}" Value="0">
        <Setter Property="Fill" Value="LimeGreen" />
    </DataTrigger>
    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag.DataItem.StatusId}"  Value="1">
        <Setter Property="Fill" Value="LightCoral" />
    </DataTrigger>
</Style.Triggers>

I have attached a sample project that shows how this works as well. 

Do not hesitate to contact us if you have other questions.

Regards,
Dimitar
Progress Telerik

[Mario]

Hi Dimitar,

Exactly what I was looking for. Thanks very much! Great support!

Kind regards,

Mario