Changing Area Series Fill Opacity Within A ChartSeries Provider

[Michael]

I'm in need of having a dynamic number of area series overlap each other in a meaningful way, and therefor I'm attempting to track down a way to set the areaseries fill property's opacity property, I have not yet been successful in any way shape or form to do so. The Xaml is shown below, any aid is greatly appreciated.

<telerik:RadCartesianChart DockPanel.Dock="Bottom" x:Name="UnderWaterEquityCurve" Palette="Windows8">
                                    <telerik:RadCartesianChart.Grid>
                                        <telerik:CartesianChartGrid MajorLinesVisibility="Y"/>
                                    </telerik:RadCartesianChart.Grid>
                                    <telerik:RadCartesianChart.Behaviors>
                                        <telerik:ChartPanAndZoomBehavior ZoomMode="Both" PanMode="Horizontal"/>
                                    </telerik:RadCartesianChart.Behaviors>
                                    <telerik:RadCartesianChart.HorizontalAxis>
                                        <telerik:DateTimeContinuousAxis LabelFitMode="Rotate" LabelFormat="dd/MM/yy"/>
                                    </telerik:RadCartesianChart.HorizontalAxis>
                                    <telerik:RadCartesianChart.VerticalAxis>
                                        <telerik:LinearAxis HorizontalAlignment="Right"></telerik:LinearAxis>
                                    </telerik:RadCartesianChart.VerticalAxis>
                                    <telerik:RadCartesianChart.SeriesProvider>
                                        <telerik:ChartSeriesProvider Source="{Binding VisiblePortfolios}">
                                            <telerik:ChartSeriesProvider.SeriesDescriptors>
                                                <telerik:CategoricalSeriesDescriptor ItemsSourcePath="UnderwaterEquityCurve" ValuePath="Value" CategoryPath="Date">
                                                    <telerik:CategoricalSeriesDescriptor.Style>
                                                        <Style TargetType="telerik:AreaSeries">
                                                            <Setter Property="LegendSettings" Value="{Binding Name, Converter={StaticResource SeriesSourceNameToSeriesLegendSettigsConverter}}"/>
                                                            <!-- Where I was attempting to change the fill property's opacity-->
                                                        </Style>
                                                    </telerik:CategoricalSeriesDescriptor.Style>
                                                </telerik:CategoricalSeriesDescriptor>
                                            </telerik:ChartSeriesProvider.SeriesDescriptors>
                                        </telerik:ChartSeriesProvider>
                                    </telerik:RadCartesianChart.SeriesProvider>
                                </telerik:RadCartesianChart>

[Evgenia]

Hi Michael,

 You can change the Opacity of the area series by tweaking the Opacity value of the SolidColorBrush:

<SolidColorBrush x:Key="MyCustomOpacityFill Opacity="0.5"  Color="#FF1B9DDE"/>

Then apply the desired Brush to the Fill property of the Area series via Style like this:

<Window.DataContext>
    <example:MyViewModel />
</Window.DataContext>
<Grid x:Name="LayoutRoot" Background="White">
    <telerik:RadCartesianChart x:Name="chart" Margin="10">
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:CategoricalAxis></telerik:CategoricalAxis>
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis HorizontalAlignment="Right"></telerik:LinearAxis>
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.SeriesProvider>
            <telerik:ChartSeriesProvider Source="{Binding Data}">
                <telerik:ChartSeriesProvider.SeriesDescriptors>
                    <telerik:CategoricalSeriesDescriptor ItemsSourcePath="Items" ValuePath="Value" CategoryPath="Category" CollectionIndex="2">
                        <telerik:CategoricalSeriesDescriptor.Style>
                            <Style TargetType="telerik:AreaSeries">
                                <Setter Property="Fill" Value="{StaticResource MyCustomOpacityFill}"/>
                            </Style>
                        </telerik:CategoricalSeriesDescriptor.Style>
                    </telerik:CategoricalSeriesDescriptor>
                </telerik:ChartSeriesProvider.SeriesDescriptors>
            </telerik:ChartSeriesProvider>
        </telerik:RadCartesianChart.SeriesProvider>
    </telerik:RadCartesianChart>
</Grid>

I hope this information helps.

Regards,
Evgenia
Telerik