How to apply shadow effect for LineSeries in UWP Chart (SfChart)?
This article explains how to apply shadow effects for the LineSeries in UWP Chart.
It can be achieved by adding DropShadowPanel inside the CustomTemplate of LineSeries, as shown in the following steps:
Step 1: To include DropShadowPanel, add the Microsoft.Toolkit.Uwp.UI.Controls NuGet package to your project.
Step 2: Import the Toolkit namespace as follows.
xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
Step 3: Add a Line inside the DropShadowPanel and bind the required X1, X2, Y1, Y2 values, then add the DropShadowPanel inside the LineSeries CustomTemplate. Thus, the line rendered for the series attains the shadow from the DropShadowPanel.
<chart:SfChart x:Name="chart" Margin="20">
…
<chart:LineSeries XBindingPath="XValue" YBindingPath="YValue"
ItemsSource="{Binding Data}">
<chart:LineSeries.CustomTemplate>
<DataTemplate>
<Border>
<toolkit:DropShadowPanel>
<Line X1="{Binding X1}" X2="{Binding X2}"
Y1="{Binding Y1}" Y2="{Binding Y2}" Stroke="{Binding Interior}"/>
</toolkit:DropShadowPanel>
</Border>
</DataTemplate>
</chart:LineSeries.CustomTemplate>
</chart:LineSeries>
</chart:SfChart>
Output
Please refer this link to know about the essential features of the UWP Chart.
See also
Find nearest datapoint in series using touch point from chart area.
