Category / Section
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.
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>
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