SfChart: Change column color based on Numeric Axis value?

[damon]

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]

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, 

Sample:SegmentColor_SfChart
 

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, 

Sample:SegmentColorPath_SfChart
 

Regards,  

Durgadevi S 

[Harrison Hincapie Cardona]

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, 

Sample:SegmentColor_SfChart
 

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, 

Sample:SegmentColorPath_SfChart
 

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

[Suyamburaja Jayakumar]

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:  

 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/132768/ze/132768-2032501586.zip  

 

Please let me know if you have any concerns. 

 

Regards, 

Suyamburaja J.