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:C1Chart.Data>  
     <c1:ChartData>  
       <c1:XYDataSeries Label="s1" XValues="0, 1, 2,3,4" Values="10, 23, 17,20,25">  
         <c1:XYDataSeries.ConnectionFill>  
           <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>  
            </LinearGradientBrush>  
        </c1:XYDataSeries.ConnectionFill>  
      </c1:XYDataSeries>  
</c1:ChartData>  
</c1:C1Chart.Data>  

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. You can refer to the attached sample for the implementation. Download Sample