How to make a dynamic interior color in a StackingColumnSeries

[Tomas Raziel Garza Amaya]

Hi,

I have a problem that my Chart doesn't work with dynamically color change. I have been used three StackingColumnSeries in the same Chart, and depend the number of quantity, the serie color change for another color.

I used Interior="{Binding ColorInterior}"

And

                                                <syncfusion: StackingColumnSeries.Style>

                                                    <Style TargetType="{x:Type syncfusion: StackingColumnSeries}">

                                                        <Setter Property="Interior" Value="Red"/>

                                                        <Style.Triggers>

                                                            <DataTrigger Binding="{Binding Value}" Value="0">

                                                                <Setter Property="Interior" Value="Green"/>

                                                            </DataTrigger>

                                                        </Style.Triggers>

                                                    </Style>

                                                </syncfusion: StackingColumnSeries.Style>

For the Style I also used Property="SegmentSelectionBrush", but it doesn't work.

Can you help me with this?, please.

[Muneesh Kumar G]

Hi Tomas, 

 

Thanks for using Syncfusion products.  

 

You can achieve your requirement by using SegmentColorPath and ListenPropertyChange in series. You change color based of value as per the below code snippet.  

 

Code snippet [XAML]: 

<chart:StackingColumnSeries XBindingPath="XValue" SegmentColorPath="Color" 

                                        ListenPropertyChange="True" 

                                        YBindingPath="YValue" ItemsSource="{Binding Data}"/> 

 

 

Code snippet [C#]: 

 

bool canUpdateHighValue = true; 

        private void Button_Click(object sender, RoutedEventArgs e) 

        { 

            var collection = chart.Series[0].ItemsSource as ObservableCollection<Model>; 

            if (canUpdateHighValue) 

                collection[0].YValue = 15; 

            else 

                collection[0].YValue = 5; 

 

            canUpdateHighValue = !canUpdateHighValue; 

        } 

  

 public double YValue 

        { 

            get { return yValue; } 

            set 

            { 

                yValue = value; 

                NotifyPropertyChanged(); 

 

                if (value > 10) 

                    Color = redColor; 

                else 

                    Color = greenColor; 

            } 

        } 

 

We have prepared a sample based on this, please find the sample from the following location.  

 

Sample : http://www.syncfusion.com/downloads/support/forum/137915/ze/WPF_Sample-645506827 

 

Please refer below user documentation for more details about SegmentColorPath and ListenPropertyChange.  

 

https://help.syncfusion.com/wpf/sfchart/styling-and-customization#segmentcolorpath 

https://help.syncfusion.com/wpf/sfchart/performance 

 

Please let us know if you have any queries.  

 

Thanks,
Muneesh Kumar G