How to Fill Area Charts in C1Chart

ComponentOne Chart for WPF revolutionizes chart presentations through powerful rendering, rich styling elements, animations, and data-binding capabilities. One can create a Gradient Effect in C1Chart by using the LinearGradientBrush class. In this blog, we will discuss how to make use of this class to create a Gradient Effect in an Area Chart & fill it with multiple colors.

Creating a Gradient Effect in C1Chart

Here is what you can do :

<c1:C1Chart ChartType="Area" Name="c1Chart1">  
       <c1:XYDataSeries Label="s1" XValues="0, 1, 2,3,4" Values="10, 23, 17,20,25">  
           <LinearGradientBrush  StartPoint="0,0.5" EndPoint="1,0.5" >  
               <GradientStop Color="Red" Offset="0.0" ></GradientStop>  
               <GradientStop Color="Yellow"  Offset="0.20"></GradientStop>  
               <GradientStop Color="Green" Offset="0.40" ></GradientStop>  
               <GradientStop Color="Blue"  Offset="0.60"></GradientStop>  
               <GradientStop Color="Pink"  Offset="0.80"></GradientStop>  
               <GradientStop Color="Coral"  Offset="1.0"></GradientStop>  

We have applied all the styling in Xaml & no code behind is required to achieve the same. Refer to the image below for the resultant display. GradientEffect_C1Chart You can refer to the attached sample for the implementation. Download Sample


GrapeCity Developer Tools
comments powered by Disqus