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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to apply gradient colors for each series in WPF Chart


The WPF Chart allows us to visualize the segments in series with different gradient colors as shown in the following image.

 

gradient colors for each series

 

It has been achieved by setting the Interior value of series with LinearGradientBrush as shown in the following code sample.

 

[XAML]

  <chart:SfChart Margin="20" x:Name="chart" >
 
        <chart:SfChart.DataContext>
            <local:ViewModel/>
        </chart:SfChart.DataContext>
 
        <chart:SfChart.PrimaryAxis>
            <chart:NumericalAxis />
        </chart:SfChart.PrimaryAxis>
 
        <chart:SfChart.SecondaryAxis>
            <chart:NumericalAxis />
        </chart:SfChart.SecondaryAxis>
 
        <chart:SfChart.Legend>
            <chart:ChartLegend DockPosition="Top"/>
        </chart:SfChart.Legend>
 
         <!--Declare the series in which segments need to fill with different gradient-->
 
        <chart:StackingBar100Series XBindingPath="XValue"
                                         Label="0-100"
                                         YBindingPath="YValue1" 
                                         ItemsSource="{Binding Data}">
 
            <!--By setting the desired color with its offset, getting each segment gradient -->
            
          <chart:StackingBar100Series.Interior>
                <LinearGradientBrush>
                    <GradientStop Offset="0" Color="#ffff01" />
                    <GradientStop Offset="1" Color="#13ab11" />
                </LinearGradientBrush>
            </chart:StackingBar100Series.Interior>
        </chart:StackingBar100Series>
       …
    </chart:SfChart>     

 

View the sample in Github

See also

How to set color for the series ColorModel property

How to define the fill color for each datapoint from ItemsSource

How to change colors of specific data points in the chart

How to add custom color model to series

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

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

Up arrow icon

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

Live Chat Icon For mobile