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.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

130163 Sep 11,2015 06:19 PM Apr 26,2017 08:07 AM UWP 4
loading
Tags: SfChart
Roimer Machacón Otero
Asked On September 11, 2015 06:19 PM

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 06:20 PM

Given that are showing one serie in the chart

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

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
[ASP.NET]
<ej:Chart ID="Chart1" runat="server" Width="970" Height="600" CanResize="true"  OnClientPreRender="onprerender">
[JS]

  function onprerender(sender) {

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

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

    
    }

Screenshot

 We are attaching Kb link   and sample for your reference
https://www.syncfusion.com/kb/5245/how-to-apply-different-colors-for-the-points-in-a-series
 WebApplication
Please let us know if you have any concerns.
Regards,
Deepaa.


fmgstocks
Replied On April 25, 2017 05:53 AM

Hi Deepaa,

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

thanks,

Devi Aruna Maharasi Murugan [Syncfusion]
Replied On April 26, 2017 08:07 AM

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"> 
     <chart:ColumnSeries.ColorModel> 
           <chart:ChartColorModel> 
                 <chart:ChartColorModel.CustomBrushes> 
                      <SolidColorBrush Color="Green"/> 
                      <SolidColorBrush Color="Green"/> 
                      <SolidColorBrush Color="Green"/> 
                      <SolidColorBrush Color="Green"/> 
                      <SolidColorBrush Color="Green"/> 
                      <SolidColorBrush Color="Red"/> 
                 </chart:ChartColorModel.CustomBrushes> 
           </chart:ChartColorModel> 
     </chart:ColumnSeries.ColorModel> 
</chart:ColumnSeries> 
             
  
  
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. 
  
XAML 
<Grid.Resources> 
     <local:ColorConvetrer x:Key="colorConv"/> 
</Grid.Resources> 
 
<chart:ColumnSeries> 
   <chart:ColumnSeries.CustomTemplate> 
      <DataTemplate> 
          <Canvas> 
            <Rectangle Height="{Binding Height}" 
                       Width="{Binding Width}" 
                       Canvas.Left="{Binding RectX}"  
                       Fill="{Binding Converter={StaticResource colorConv}}" 
                       Canvas.Top="{Binding RectY}"/> 
          </Canvas> 
      </DataTemplate> 
   </chart:ColumnSeries.CustomTemplate> 
</chart:ColumnSeries> 
  
CS 
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); 
          else 
            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, 
  
  
Regards, 
Devi 







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.

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.

;