How to apply gradient colors for each series in WPF Chart

2 mins read

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

Did you find this information helpful?

Yes

Comments (0)

How to apply gradient colors for each series in WPF Chart

Access denied