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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to put a different color for a column in a chart column

Thread ID:





130163 Sep 11,2015 10:19 PM UTC Apr 26,2017 12:07 PM UTC UWP 4
Tags: SfChart
Roimer Machacón Otero
Asked On September 11, 2015 10:19 PM UTC

Hi we're using sycnfusion chart column, now are need show the last column of the chart in a different color.

Example of six columns, five in green color and the six column in red color. Is this possible?

Roimer Machacón Otero
Replied On September 11, 2015 10:20 PM UTC

Given that are showing one serie in the chart

Deepaa Pragaasam [Syncfusion]
Replied On September 14, 2015 10:40 AM UTC

Hi Roimer,
Thanks for contacting Syncfusion Support.
We have analyised your query .We can set different color to a particular point in the column using the Fill property in the points.

We have used the preRender event to set color to the last point in the column series
Code snippet
<ej:Chart ID="Chart1" runat="server" Width="970" Height="600" CanResize="true"  OnClientPreRender="onprerender">

  function onprerender(sender) {

            var length = sender.model.series[0].points.length - 1 ;

            sender.model.series[0].points[length].fill = "green";



 We are attaching Kb link   and sample for your reference
Please let us know if you have any concerns.

Replied On April 25, 2017 09:53 AM UTC

Hi Deepaa,

Is there similar code for UWP controls?  I don't see the points option in UWP.


Devi Aruna Maharasi Murugan [Syncfusion]
Replied On April 26, 2017 12:07 PM UTC

Hi Roimer, 
Thanks for contacting Syncfusion Support. 
We can achieve this requirement in two ways 
1)With Custom palette. 
In SfChart UWP, we can achieve your requirement by setting the Palette property of Series as Custom and therefore you can apply the desired color to segment by adding the color in ChartColorModel’s CustomBrushes. 
It can be set as shown in the below code snippet, 
<chart:ColumnSeries Palette="Custom"> 
                      <SolidColorBrush Color="Green"/> 
                      <SolidColorBrush Color="Green"/> 
                      <SolidColorBrush Color="Green"/> 
                      <SolidColorBrush Color="Green"/> 
                      <SolidColorBrush Color="Green"/> 
                      <SolidColorBrush Color="Red"/> 
Please find the output screenshot, 
We have prepared a demo sample for your reference and it can be downloaded from below link, 
Sample: ColumnColor 
Please refer the below UG documentation link to know more about color customization of series, 
2)With CustomTempate, 
By using the CustomTemplate for ColumnSeries, we can customize the corresponding segment color with Converter. 
     <local:ColorConvetrer x:Key="colorConv"/> 
            <Rectangle Height="{Binding Height}" 
                       Width="{Binding Width}" 
                       Canvas.Left="{Binding RectX}"  
                       Fill="{Binding Converter={StaticResource colorConv}}" 
                       Canvas.Top="{Binding RectY}"/> 
public class ColorConvetrer : IValueConverter 
   public object Convert(object value, Type targetType, object parameter,  
                            string language) 
        var segment = value as ColumnSegment; 
        var collection = segment.Series.ItemsSource as ObservableCollection<Model>; 
         if (segment.Item == collection[collection.Count - 1]) 
           return new SolidColorBrush(Colors.Red); 
            return new SolidColorBrush(Colors.Green); 
    public object ConvertBack(object value, Type targetType, object parameter,  
                                      string language) 
        throw new NotImplementedException(); 
Please find the output screenshot, 
We have prepared a demo sample for your reference and it can be downloaded from below link, 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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