Binding of LineSeries.DefaultVisualStyle Properties

1 Answer 46 Views
Chart
Mario
Top achievements
Rank 1
Iron
Mario asked on 15 Jun 2023, 11:57 AM

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

 

1 Answer, 1 is accepted

Sort by
1
Accepted
Dimitar
Telerik team
answered on 19 Jun 2023, 06:29 AM

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

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.

Mario
Top achievements
Rank 1
Iron
commented on 19 Jun 2023, 08:03 AM

Hi Dimitar,

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

Kind regards,

Mario

 

Tags
Chart
Asked by
Mario
Top achievements
Rank 1
Iron
Answers by
Dimitar
Telerik team
Share this question
or