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.
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>
For more details, please refer to the project on 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
Conclusion
I hope you enjoyed learning how to apply gradient colors for each series in WPF Chart.
You can refer to our WPF Chart feature tour page know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF Chart Examples to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
