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. Image for the cookie policy date

SfChart: Change column color based on Numeric Axis value?

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!


3 Replies

DS Durgadevi Selvaraj Syncfusion Team 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 




HH Harrison Hincapie Cardona replied to Durgadevi Selvaraj July 12, 2020 01:50 PM 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 



Buenos días 

Podria por favor darme un ejemplo de como ¿Cambiar el color de la columna en función del valor del eje numérico ?, pero basado en los datos de una lista proveniente de una base de datos.
 
Es decir quisiera poner la condicional amarillo rojo y verde según el valor del eje numérico, de la lista que indica la base de datos y que cuando recorra la lista me pinte el gráfico.

Hay alguna manera de hacer esto en Syncfusion por codigo C#.

Les Agradeceria mucho su ayuda ya que llevo mucho tiempo tratándolo de hacer.




  


Attachment: EjemploSemaforo_fe67b52d.zip


SJ Suyamburaja Jayakumar Syncfusion Team July 13, 2020 06:15 PM UTC

Hi Harrison Hincapie Cardona, 
 
Greetings from Syncfusion. 
 
We can achieve your requirement (Changing column color based on Numerical axis value) by binding color Model to the CustomBrushes of chart series. We can set the specific color to the chart segment as like in the below code, 
 
C#: 
public ChartColorCollection Colors { get; set; } 
 
. . . .  
 
Colors = new ChartColorCollection(); 
            foreach (var item in viewModel.Data) 
            { 
                if (item.YValue <= 29) 
                    Colors.Add(Color.Green); 
                else if (item.YValue > 29 && item.YValue <=32) 
                    Colors.Add(Color.Yellow); 
                else if (item.YValue == 40) 
                { 
                    Colors.Add(Color.Red);  
                } 
            } 
. . . . 
           ColumnSeries Semaforo = new ColumnSeries();  
            Semaforo.ColorModel.Palette = ChartColorPalette.Custom; 
            Semaforo.ColorModel.CustomBrushes = Colors; 
            chart.Series.Add(Semaforo);  
 
Screenshot:  
 
 
 
Please let me know if you have any concerns. 
 
Regards, 
Suyamburaja J. 


Loader.
Up arrow icon