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

SFStackingColumnSeries - changing color of column based upon value within SFChartDataPoint

Hi there, 

I have a dynamic SFChart based on data retrieved from a REST service. 

The data is populate within the constructor of my view modal which is derived from SFChartDataSource. 

Within my ViewController I set the ColorModel to Custom and insert the colors required. However, what I need to do is display different colors based on whether the value of the column is > 50. 

The GetDataPoint method checks this value and toggles the Series color - stepping through the code at run time I can see the code does try to change the color. However, what renders on the screen is simply the colors in the order specified in the ColorModel property. 

I have the following methods inside my derived SFChartDataSource:

IS there any way set the color of each DataPoint or Column indvidually and dynamically based on values? 

       public override SFChartDataPoint GetDataPoint(SFChart chart, nint index, nint seriesIndex)
           if (seriesIndex == 0)
               SFSeries series = this.GetSeries(chart, index);
               SFChartDataPoint bar =  actuals.GetItem<SFChartDataPoint>((nuint)index); // actuals being my custom NSMutableArray of values
               NSNumber value = bar.YValue as NSNumber;
               // if the learner has achieved 50% of vial (100% of target) display light blue
               if(value.Int32Value >= 50)
                   series.Color = Colors.Blue;
               } else {
                   series.Color = Colors.Ochre;
               return bar;
           return remainders.GetItem<SFChartDataPoint>((nuint)index);
       public override nint GetNumberOfDataPoints(SFChart chart, nint index)
           return (nint)actuals.Count;
       public override SFSeries GetSeries(SFChart chart, nint index)
           SFStackingColumnSeries series = new SFStackingColumnSeries();
           series.EnableTooltip = true;   
           return series;

Also, where is the markdown for code on these forums?  

4 Replies

JN John Nolan November 3, 2016 01:59 PM UTC


To assist with understanding the requirements I have attached an image of the chart I am trying to render. 

I have the labels and center line - as well as the data plotted correctly. The only missing ingredient is the color based upon whether it's above or below the 50% line. I looked into CustomRenderers however no joy. 

(Also is there a way of centering text using PrimaryAxis.LabelStyle?) 
Desired Chart Output

ME Manivannan Elangovan Syncfusion Team November 4, 2016 06:27 PM UTC

Hi John,

Thanks for contacting Syncfusion support.

We can achieve your requirement different segment color based on datapoint value by using the properties CustomColors and Palette, which is available in ColorModel property of series and centering the text of PrimaryAxis.LabelStyle by adjusting the Margin property of LabelStyle.

We have prepared a sample for your requirement and it can be downloaded from the following location.

Sample:  http://www.syncfusion.com/downloads/support/forum/127207/ze/StackingColumnSeries1561034242  

Manivannan E. 

JN John Nolan November 7, 2016 09:49 AM UTC


Many thanks Manivannan!

Once again the Syncfusion support has been sublime. 

I hope this post also assist others encountering similar problems. 


SG Sivaram Ganesan Syncfusion Team November 8, 2016 06:14 AM UTC

Hi John,

Most welcome.


Live Chat Icon For mobile
Up arrow icon