We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

SfChart: Change column color based on Numeric Axis value?

Thread ID:

Created:

Updated:

Platform:

Replies:

132768 Sep 20,2017 12:44 AM UTC Sep 20,2017 08:29 AM UTC UWP 1
loading
Tags: SfChart
damon
Asked On September 20, 2017 12:44 AM UTC

Hey guys.  
Your SfChart control is fantastic.
Is there a way to change the color of the column based on the NumericAxis value?
So for first Item if the value is 10 then I want the color to be red.  If it is 15-25 I want it to be yellow and >25 Green.
Cheers!


Durgadevi Selvaraj [Syncfusion]
Replied On September 20, 2017 08:29 AM UTC

Hi Damon, 

Thanks for contacting Syncfusion Support 

1.Using Custom Palette support 
 
We can achieve your requirement(Changing column color based on Numerical axis value) by binding color converter to the CustomTemplate of chart series. In that converter, we can set the specific color to the chart segment as like in the below code, 

MainWindow.xaml: 
  <Grid.Resources> 
            <local:SegmentInterior x:Key="colorConv"/> 
   </Grid.Resources> 
 
  <chart:SfChart Margin="10"> 
            <chart:SfChart.PrimaryAxis> 
                <chart:CategoryAxis/> 
            </chart:SfChart.PrimaryAxis> 
 
            <chart:SfChart.SecondaryAxis> 
                <chart:NumericalAxis/> 
            </chart:SfChart.SecondaryAxis> 
 
            <chart:ColumnSeries ItemsSource="{Binding Collection}"  XBindingPath="XValue" YBindingPath="YValue"> 
                <chart:ColumnSeries.CustomTemplate> 
                    <DataTemplate> 
                        <Canvas> 
                            <Rectangle Height="{Binding Height}" Width="{Binding Width}" Canvas.Left="{Binding RectX}"  
                                       Canvas.Top="{Binding RectY}" Fill="{Binding Converter={StaticResource colorConv}}"/> 
                        </Canvas> 
                    </DataTemplate> 
                </chart:ColumnSeries.CustomTemplate> 
            </chart:ColumnSeries> 
 
        </chart:SfChart> 

SegmentInterior.cs: 
public class SegmentInterior : IValueConverter 
{ 
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
        { 
            var segment = value as ColumnSegment; 
 
            if (segment.YData < 10) 
                return new SolidColorBrush(Colors.Red); 
            else if (segment.YData >= 15 && segment.YData <= 25) 
                return new SolidColorBrush(Colors.Yellow); 
            else 
                return new SolidColorBrush(Colors.Green); 
            
        } 
 
} 

Please find the output screenshot, 
 
Please find the sample from below link, 

2.Using Segment color path support 
 
Also, we can specify the desired color to the segment in the ViewModel and access it through the property “SegmentColorPath”  of the chart series as like in the below code snippet, 
 
MainWindow.xaml: 
 
<chart:ColumnSeries ItemsSource="{Binding Collection}" SegmentColorPath="SegmentInterior"  XBindingPath="XValue" YBindingPath="YValue"/> 

ViewModel.cs: 
 
public class ViewModel 
    { 
        public ObservableCollection<Model> Collection { get; set; } 
        public ViewModel() 
        { 
            Collection = new ObservableCollection<Model>(); 
 
            Collection.Add(new Model() { XValue = 1, YValue = 23, SegmentInterior = Brushes.Yellow }); 
            Collection.Add(new Model() { XValue = 2, YValue = 5, SegmentInterior = Brushes.Red }); 
            Collection.Add(new Model() { XValue = 3, YValue = 30, SegmentInterior = Brushes.Green }); 
            Collection.Add(new Model() { XValue = 4, YValue = 18, SegmentInterior = Brushes.Yellow }); 
            Collection.Add(new Model() { XValue = 5, YValue = 8, SegmentInterior = Brushes.Red }); 
            Collection.Add(new Model() { XValue = 6, YValue = 23, SegmentInterior = Brushes.Yellow }); 
           Collection.Add(new Model() { XValue = 7, YValue = 40, SegmentInterior = Brushes.Green }); 
            Collection.Add(new Model() { XValue = 8, YValue = 20, SegmentInterior = Brushes.Yellow }); 
 
        } 
    } 

Please find the output screenshot, 
 
We have prepared a sample for your reference and it can be downloaded from the below link, 
Regards,  
Durgadevi S 



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;