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.
GradientEffect_C1Chart

You can refer to the attached sample for the implementation.
Download Sample